Dynamic form autocomplete

Question

I have a form that includes lines dynamically. In this form I have a field autocomplete where I select the product and add the product value to another input. My problem is this: if I include two lines and select the product the value doubles in the price field (according to the image below) I would like each line included to take the value of that product. It follows the code of autocomplete and include lines:

function autoCompletar() {
    $('.produtoDesc').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '../models/retornaProduto.php',
                dataType: "json",
                data: {
                    name_startsWith: request.term,
                    type: 'produto'
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        var code = item.split("|");
                        return {
                            label: code[0],
                            value: code[0],
                            data: item
                        }
                    }));
                }
            });
        },
        minLength: 0,
        select: function (event, ui) {
            var names = ui.item.data.split("|");
            $("input[name='produtoValor[]']").val(names[1]);
        }
    });
};

function adicionaLinha() {
    var addLinha = $("#qtdLinhas")["val"]();
    let novoCampo;
    let idLinha;
    for (var i = 0; i < addLinha; i++) {
        novoCampo = $("tr.linhas:first")["clone"]();
        idLinha = parseInt($("tr.linhas:last").prop("id").split("item_")[1]) + 1;
        novoCampo.find('input').val("");
        novoCampo.insertAfter("tr.linhas:last").attr("id", "item_" + idLinha).find("span").html(idLinha);
        removeLinha();
        autoCompletar();
    }
    ;
};

Answer 1

You gotta get the input from the same line where you entered the autocomplete field information.

The way he’s doing it, he’s taking all the existing elements with input[name='produtoValor[] and inserting the value of names[1]:

// pega todos os elementos com name produtoValor[]
$("input[name='produtoValor[]']").val(names[1]);

Change this line to:

          busca por isso                             dentro disso
                 ↓                                         ↓
$("input[name='produtoValor[]']", $(event.target).closest("tr")).val(names[1]);

So it will fetch only the element of the same line <tr> where is the autocomplete field.

Example:

$( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( ".produtoDesc" ).autocomplete({
      source: availableTags,
          select: function (event, ui) {
       $("input[name='produtoValor[]']", $(event.target).closest("tr")).val("valor adicionado");
        }

    }
    );
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="ui-widget">
   <tr>
      <td>
           <label for="tags">Digite Java:</label>
           <input class="produtoDesc">
      </td>
      <td>
        <input name='produtoValor[]'>
     </td>
  </tr>
   <tr>
      <td>
           <label for="tags">Digite Basic:</label>
           <input class="produtoDesc">
      </td>
      <td>
        <input name='produtoValor[]'>
     </td>
  </tr>
</table>