autocomplete doesnt work in dynamic input field

autocomplete doesnt work in dynamic input field

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++;
        });

thanks for advance