Autocomplete works, my problem is with jquery switches for dynamic fields

Question

I ask for the help of someone to teach me how to make Jquery selector work with dynamic fields... I create lines in the form from an event that defines the amount of lines the note will have... from there it creates the lines and the first field has an autocomplete, which works! The other fields use the auto complete information to fill in the rest of the information... I create a looping to create the lines and define the ajax requests in javascript ... The problem happens when I select the autocomplete on the additional lines... Because the selector of the fields have the same name... Either it changes the information on all the other lines at once, or if I use eq(z) as the selector it only changes the other information on the last line... I’ve tried everything imaginable... I need help... The problem is how to define the dynamic field selector, because it has the same class and name...

<div id="origem">

<div class="row">
<div class="col col-md-3">
<div class="input-group">

<input type="text" class="auto form-control" id="autoprod" name="prod[0]" placeholder="Produto...">

<input type="hidden" id="prodid" name="prodid[0]" value="0">

<script type="text/javascript">


$(document).ready(function(){

var i = 0;

$('#autoprod').eq(i).autocomplete({
source: function(request, response) {

$.ajax({
url:'<?php echo base_url().'Compras/prodList'; ?>',
type: 'post',
dataType: 'json',
data: {
search: request.term
},
success: function(data){
response(data);
}

});
},
select: function(event, ui){
$('#autoprod').eq(i).val(ui.item.label);
$('#prodid').val(ui.item.value);
$('#marca').val(ui.item.marc);
$('#unit').val(ui.item.uni);

return false;
}

});
});





</script>


</div>


</div>
<div class="col col-md-2">
<div class="input-group">

<input type="text" class="form-control" id="marca" name="marca[0]" placeholder="Marca..." readonly>

</div>
</div>


<div class="col">
<div class="input-group">



<input type="hidden" class="form-control" id="unit" name="unit[0]" placeholder="Unidade..." readonly>
<input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly>

<script type="text/javascript">

$(document).ready(function(){

$("#autoprod").on('blur', function() {
var txt = $('#unit').val();

var jtxt = {
'valor1': txt
};

$.ajax({
url: '<?php echo base_url()."Compras/ajax"; ?>',
type: 'post',
data: jtxt,
dataType:'json',
success:function(resultado) {

$("#lugar").val(resultado[0].nome_unit);


},
error:function(){
alert("Este produto não existe... Preencha corretamente o formulário!");

},



});

});
});




</script>




</div>
</div>



<div class="col">
<div class="input-group">

<input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required>

</div>


</div>
<div class="col">
<div class="input-group">

<input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required>

</div>


</div>
<div class="col">
<div class="input-group">

<input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly>

</div>

<script type="text/javascript">
function id(valor_campo) {
return document.getElementById(valor_campo);
}

function getValor(valor_campo) {
var valor = document.getElementById(valor_campo).value.replace('.','');
valor = valor.replace(',','.');
return parseFloat(valor);
}

function mult() {
var total = getValor('valorunit') * getValor('quant');
id('totalp').value = total.toFixed(2);
}

</script>

</div>
</div>
</br>
</div>

<div id="destino">

</div>
Restante de formulário:

<script type="text/javascript">

$(document).ready(function(){

$("#qt").on('blur', function(e) {
e.preventDefault();
document.getElementById("qt").readOnly = true;
document.getElementById("destino").innerHTML="";

var qtr = $("#qt").val();

var i = 1;

while (i < qtr) {

var z = i - 1;


var t = '<div class="row">\<div class="col-3">\<div class="input-group">\<input type="text" class="autot form-control" name="prod[0]" placeholder="Produto...">\<input type="hidden" class="idr" name="prodid[0]" value="0">\</div></div>\<div class="col-2">\<div class="input-group">\<input type="text" class="nname form-control" name="marca[0]" placeholder="Marca..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="hidden" class="uunit form-control" name="unit[0]" placeholder="Unidade..." readonly>\<input type="text" class="form-control" id="lugar" name="unit2[0]" placeholder="Unidade..." readonly>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="valorunit" name="valorunit[0]" pattern="^$?[0-9]+(,[0-9]{3})*(.[0-9]{2})?$" onkeydown="function(money2);" placeholder="Preço Unit. (R$)" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="number" class="form-control" id="quant" name="quant[0]" min="1" max="999" placeholder="Quantidade" onblur="mult()" value="1" required>\</div></div>\<div class="col">\<div class="input-group">\<input type="text" class="form-control money2" maxlength="15" id="totalp" name="totalp[0]" onfocus="function(money2);" placeholder="Total (R$)" required readonly>\</div></div></div></br>';

$("#destino").append(t);


$('.autot').autocomplete({
source: function(request, response) {

$.ajax({
url:'<?php echo base_url().'Compras/prodList'; ?>',
type: 'post',
dataType: 'json',
data: {
search: request.term
},
success: function(data){
response(data);
}

});
},
select: function(event, ui){


$(this).val(ui.item.label);

$('.idr').val(ui.item.value);

$('.nname').val(ui.item.marc);

$('.uunit').val(ui.item.uni);


return false;

}

});



i = i + 1;


}


});

});


</script>

</br></br>

Answer 1

Just search for the elements that are in the same div .row. Use .closest(".row") to select the entire row and the .find() to find the desired element.

For example, to select and change the value of the element .idr of the line, you use:

$(this).closest(".row").find(".idr").val(ui.item.value);