Javascript jquery AutoComplate İnput not Working

Javascript jquery AutoComplate İnput not Working .I can try but not this. Add package link but AutoComplate İnput not Working.
I want only add pack after autocomplete input working. Only this..I think insertCell Hard this.I dont understend this. id =’dap’

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <title></title>
</head>
<body>
<script>
          $(function() {
    var availableTags = [
                          "arta",
                          "barta",
                          "barta2",
                  ];


  $("#dap").autocomplete({
      source:availableTags
  });
});
     </script> 


                                             <form method="post" action="add.php">
                                           <table id="table1">
                                           <tr>
                                            <br>
                                             <td colspan="4"><a onclick="myFunction1()"  style=" color: #000; margin-top: 10px" ><i></i> Paket Ekle</a>&nbsp;&nbsp; <a onclick="myDeleteFunction1()"  style="color: #000; margin-top: 10px" ><i ></i> Paket Sil</a></td>
                                             
                                          </tr>
                                          <tr>
                                          
                                             <td valign="bottom"><strong>GTIP No.</strong></td>
                                      
                                            </tr>
                                          <tr>
                                      
                                         <td><input name="dap" type="text"   style="width:90%; margin-top: 15px"></td>

                                        
                                             <script>
                                       var i = 1;
                                          function myFunction1() {
                                              var table = document.getElementById("table1");
                                              var row = table.insertRow(-1);
                                              var cell1 = row.insertCell(0);
                                           
                                             
                                          cell1.innerHTML = "<input name='dap"+i+"'  id='dap'  type='text'  style='width:90%;margin-top:15px;' >";
                    
                                          i++;
                                          }

                                          function myDeleteFunction1() {
                                              document.getElementById("table1").deleteRow(-1);
                                          }

  
                                       </script> 
                                       </table>
                                     </form>
</body>
</html>