Jquery ui autocomplete not fill

Question

I'm new to JQuery and jQuery UI.

I'm using autocomplete with remote json in a table with dynamically rows.
The problem is: everything works, but for some reasons, the input code isn't filled.
The curious thing is that if I hardcode #code0 or #code1 in select area, it works.
But it seem #code+i isn't recognized in select. Another strange thing is $("#product"+i) works.

Can someone help a JS beginner?

$(document).ready(function(){
    var i=0;
    $("#add_row").click(function(){
        $('#addr'+i).html("<td>"+ (i+1) +"<\/td><td><input id='product"+i+"' name='product"+i+"' type='text' placeholder='Digita il codice o il nome del prodotto' class='form-control input-md'  /> <\/td><td><input id='code"+i+"'  name='code"+i+"' type='text' placeholder='Codice'  class='form-control' readonly='readonly'><\/td>");
        $('#tab_logic').append('<tr id="addr'+(i+1)+'"><\/tr>');
        $("#product"+i).autocomplete({
            source: function( request, response ) {
            $.ajax({
                url: "productsearch.php",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.text,
                                id: item.id,
                                code: item.id
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                var codice="$code"+i;
                $('#codice').val(ui.item.id);
            }
        });

      i++;
    });
    $("#delete_row").click(function(){
        if(i>1){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });

    $("#product"+i).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "productsearch.php",
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                            response($.map(data, function(item) {
                            return {
                                label: item.text,
                                id: item.id,
                                code: item.id
                                };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                $("#code"+i).val(ui.item.id);
            }
        });
        i++;
    });
});

<tbody>
    <tr id='addr0'>
        <td>1</td>
        <td><input id="product0" type="text" name='product0' placeholder='Digita il codice o il nome del prodotto' class="form-control"></td>
        <td><input id="code0" type="text" name='code0' placeholder='Codice' class="form-control" readonly="readonly"></td>
    </tr>

    <tr id='addr1'>
</tr>

Answer 1

I've solved by adding a new var count=0; at the top. Now I use:

$("[id^=code]:eq( " + count + " ) ").val(ui.item.id);

the problem is the variable i

Thank you everyone for the help

            select: function(event, ui) {
                $("[id^=code]:eq( " + count + " ) ").val(ui.item.id);
                 }

        });
  i++;
  count++;
});

Answer 2

One thing for sure is that in your select event handler on the first autocomplete, you have a bug:

select: function(event, ui) {
                var codice="$code"+i;
                $('#codice').val(ui.item.id);
            }

You create a variable for the jquery selector and then don't use it. You can't update your input value whose id is "code"+i with this function. Instead, it needs to be:

select: function(event, ui) {
                var codice="#code"+i;
                $(codice).val(ui.item.id);
            }

Fix that and see if your problem goes away.