Autocomplete in bringing result in other input

Question

Good Night, I need some help! , I believe it’s very simple, but I’m already 3 hours into this code, and I went blind! kkkk

I have a form that contains the fields below.

I am doing the autocomplete in the field ID="Cod" and the search response is printed in the fields id="Cod", id="desc" and id="und". so far the code runs, the problem is that it prints the results on all Cod, desc e und, wanted I think I need to break , but I’m not getting

Plugin used: https://www.devbridge.com/sourcery/components/jquery-autocomplete/

Thanks in advance!

<table class="table table-centered m-0" id="products-table">
<thead class="thead-light">
    <tr>
        <th>Codigo</th>
        <th>Descrição</th>
        <th>Und.</th>
        <th>Quantidade</th>
        <th>R$: UND</th>
        <th>R$: TOTAL</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><input type="text" class="form-control" id="cod" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" name="qdt" autocomplete="off"></td>
        <td><input type="text" class="form-control" name="vlund" autocomplete="off"></td>
        <td><input type="text" class="form-control" name="vltotal" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod1" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc1" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und1" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod2" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc2" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und2" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod3" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc3" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und3" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod4" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc4" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und4" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod5" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc5" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und5" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
    <tr>
        <td><input type="text" class="form-control" id="cod6" name="cod" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="desc6" name="desc" autocomplete="off"></td>
        <td><input type="text" class="form-control" id="und6" name="und" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" autocomplete="off"></td>
        <td><input type="text" class="form-control" readonly></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td><button type="button" class="btn btn-blue btn-rounded waves-effect waves-light"><i class="fas fa-plus"></i> Linhas</button></td>
        <td></td>
        <td></td>
        <td></td>
        <td><label for="datae">Outras Despesas</label><input type="text" class="form-control" autocomplete="off"></td>
        <td><label for="datae">Valor Total da Nota</label><input type="text" class="form-control" readonly></td>
    </tr>
</tfoot>
</table>

        var el = document.getElementById('products-table');
        el.addEventListener('click', function(e) {

        $('input[id^="cod"]').autocomplete({
            minChars: 2,
            lookup: function (query, done) {
                var result = {
                    suggestions: [
                        { "value": "Arroz", "data": "KG", "id": "001" },
                        { "value": "Batata", "data": "KG", "id": "002" },
                        { "value": "Cenoura", "data": "KG", "id": "003" }
                    ]
                };

                done(result);
            },
            onSelect: function (suggestion) {   
                $( 'input[id^="cod"]').val( suggestion.id );
                $( 'input[id^="desc"]' ).val( suggestion.value );
                $( 'input[id^="und"]' ).val( suggestion.data );
                return false;
                }
        });


        });

Answer 1

Change the callback onSelect to:

onSelect: function (suggestion) {   
            $('#'+ this.id).parent().parent().find('input[name="cod"]').val( suggestion.id );
            $('#'+ this.id).parent().parent().find('input[name="desc"]').val( suggestion.value );
            $('#'+ this.id).parent().parent().find('input[name="und"]').val( suggestion.data );
            return false;
        }