Problems with Variables in JS

Question

I have some inputs that should be self-paced.

Here’s how it works: I fill out the input Barcode 1 and JS automatically populates Product Description 1 and Unit Value 1.

The problem I’m having is that when I put Barcode 1 it fills in the data of 2 of 3 of 4 and if I fill in Barcode 2 and JS 'reeprenche' inputs 1, 2, 3 ...

Follows my script:

		$(document).ready(function(){
			$('.class_codbar input[id^=cod]').blur(function(){
				var $descricao_produto = $('.class_descricao input[id^=descricao]');
				var $preco_produto = $('.class_unit input[id^=valor_unitario]');
				$.getJSON('preenche_produto.php',{ 
					cod: $( this ).val()
				},function( json ){
					$descricao_produto.val( json.descricao_produto );
					$preco_produto.val( json.preco_produto );
				});
			});
		});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='linha"+iLoop+"' style='display:none'>
	<div class='form-row'>
		<div class='class_codbar form-group col-md-4'>
			<label for='cod"+iLoop+"'>Código de Barras "+iLoop+"</label>
			<input type='text' class='form-control' id='cod"+iLoop+"' name='cod"+iLoop+"' >
		</div>
		<div class='class_descricao form-group col-md-8'>
			<label for='descricao"+iLoop+"'>Descrição Produto "+iLoop+"</label>
			<input type='text' class='form-control' id='descricao"+iLoop+"' name='descricao"+iLoop+"'>
		</div>
	</div>
	<div class='form-row'>
		<div class='class_unit form-group col-sm-3'>
			<label for='valor_unitario"+iLoop+"'>Valor Unitário "+iLoop+"</label>
			<input type='text' class='selectall form-control' id='valor_unitario"+iLoop+"' name='valor_unitario"+iLoop+"' onkeyup='k(this);' value='0,00'>
		</div>
		<div class='class_quant form-group col-sm-3'>
			<label for='qnt"+iLoop+"'>Quantidade "+iLoop+"</label>
			<input type='text' class='selectall form-control' id='qnt"+iLoop+"' name='qnt"+iLoop+"' value='0'>
		</div>
		<div class='class_subtotal form-group col-sm-3'>
			<label for='subtotal"+iLoop+"'>Subtotal "+iLoop+"</label>
			<input type='text' class='form-control' id='subtotal"+iLoop+"' name='subtotal"+iLoop+"' readonly>
		</div>
		<div class='form-group col-sm-3'>
			<input type='button' value='Remover' onclick='RemoverCampos(\""+iLoop+"\")' class='btn btn-sm btn-danger'>
		</div>
	</div>
</div>

Answer 1

Try to adjust the js thus:

$(document).ready(function(){
    $('.class_codbar input[id^=cod]').blur(function(){
        var parent = $(this).closest('[id^=linha]');
        var $descricao_produto = parent.find('.class_descricao input[id^=descricao]');
        var $preco_produto = parent.find('.class_unit input[id^=valor_unitario]');
        $.getJSON('preenche_produto.php',{ 
            cod: $( this ).val()
        },function( json ){
            $descricao_produto.val( json.descricao_produto );
            $preco_produto.val( json.preco_produto );
        });
    });
});

So he will always seek the line "father", save her in the var parent and assign values only to child elements of the respective line.

Answer 2

Supposing iLoop is an index that will be incremented and added to ids

The this.id.substr(3) takes the barcode input id and removes the first 3 characters (cod) and the iLoop, then use it to select the elements that are part of the set

$(document).ready(function() {
  $('.class_codbar input[id^=cod]').blur(function() {
    var $descricao_produto = $('.class_descricao input#descricao'+this.id.substr(3));

    var $preco_produto = $('.class_unit input#valor_unitario'+this.id.substr(3));
    
    console.log($descricao_produto[0], $preco_produto[0])

    $.getJSON('preenche_produto.php',{ 
        cod: $( this ).val()
    },function( json ){
        $descricao_produto.val( json.descricao_produto );
        $preco_produto.val( json.preco_produto );
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='linha1'>
  <div class='form-row'>
    <div class='class_codbar form-group col-md-4'>
      <label for='cod1'>Código de Barras 1</label>
      <input type='text' class='form-control' id='cod1' name='cod1'>
    </div>
    <div class='class_descricao form-group col-md-8'>
      <label for='descricao1'>Descrição Produto 1</label>
      <input type='text' class='form-control' id='descricao1' name='descricao1'>
    </div>
  </div>
  <div class='form-row'>
    <div class='class_unit form-group col-sm-3'>
      <label for='valor_unitario1'>Valor Unitário 1</label>
      <input type='text' class='selectall form-control' id='valor_unitario1' name='valor_unitario1' onkeyup='k(this);' value='0,00'>
    </div>
    <div class='class_quant form-group col-sm-3'>
      <label for='qnt1'>Quantidade 1</label>
      <input type='text' class='selectall form-control' id='qnt1' name='qnt1' value='0'>
    </div>
    <div class='class_subtotal form-group col-sm-3'>
      <label for='subtotal1'>Subtotal 1</label>
      <input type='text' class='form-control' id='subtotal"+iLoop+"' name='subtotal1' readonly>
    </div>
    <div class='form-group col-sm-3'>
      <input type='button' value='Remover' onclick='RemoverCampos("1")' class='btn btn-sm btn-danger'>
    </div>
  </div>
</div>