datatables for bigners in jquery : how can i use data tables of jquery i want to create table in which i use atributes of freegeoip.net my project is to recieve data from freegeoip.net and put it into datatables..here is my code with html i try to save data into html too

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>
    <head>
    	<title>idAddress</title>
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>


    <input id="ip" type="text" name="textField" placeholder="Enter Ip Address"><br/><br/>
    <input id="button" type="submit" value="submit Adress">
    <input id="button2" type="button" value="sent" onclick="cheak()">

    <p id="p"></p>


    <script type="text/javascript">
      var ipAdd;   
      window.cond = false;
      var index = 0;
      function validateIp(ipAdd) {
      var save = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
      return save.test(ipAdd);
    }

    function validate() {
         index++;  //for storing data in array . .
      
        ipAdd = $("#ip").val();

      if (validateEmail(ipAdd)) {
        console.log("valid");

        
      } else {
        console.log("invalid");
      }
      
    }

    $("#button").bind("click", validate);


    function cheak(){

     var info = [];
      
     $.ajax({
        url:'https://freegeoip.net/json/'+ipAdd,
        type:"Get",
        dataType:'json',
        success:function(data){
          
            info[index] = JSON.stringify(data);
            document.getElementById("p").innerHTML = info[index];
          

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
         console.log("please cheak your IpAdress");
      }


       
        
    });
        
         

      
    }

    </script>


    </body>
    </html>

<!-- end snippet -->

