i have an ajax request to take source autocomplete in dynamic field with add button but not working, pls correct my code, i dont understand..

1.     var counter = 1;
   
       $("#addrow").on("click", function () {
           var newRow = $("<tr>");
           var cols = ""; 
           cols += '<td><input type="text" style="width: 200px;" id="item[' + counter + ']" name="item[' + counter + ']" placeholder="Item"></td>';
           cols += '<td><input type="text" style="width: 100px;" id="harga[' + counter + ']" name="harga[' + counter + ']" placeholder="Harga">  </td>';
           cols += '<td><input type="text" style="width: 50px;" id="qty[' + counter + ']" name="qty[' + counter + ']" placeholder="Qty" onkeyup="findTotal(); findJumlah()">  </td>';
           cols += '<td><input type="text" style="width: 100px;" id="diskon[' + counter + ']" name="diskon[' + counter + ']" placeholder="Diskon">  </td>';
           cols += '<td><input type="text" id="total[' + counter + ']" name="total[' + counter + ']" placeholder="Total"></td>';
           cols += '<td><input type="button" style="width: 50px;" class="ibtnDel btn btn-md btn-danger" value="-" onclick="findJumlah()"></td>';
           newRow.append(cols);
           newRow.insertBefore("tr.isi");
           $("#item[" +counter+ "]").autocomplete({
                   source: function(request, response) {
                   $.ajax({
                   url: "<?php echo site_url('Produk/data'); ?>",
                   data: { id_barang: $("#item[" +counter+ "]").val()},
                   dataType: "json",
                   type: "POST",
                   success: function(data){
                   console.log(data);
                   response(data);
                   }   
               });
           },
       });
           counter++;
       });