Dynamic price calculation

Question

I am developing a sales system web app, in which you can place several products in 1 sale, increasing inputs dynamically.

He calculates the price of each product by multiplying it by quantity automatically, but I can only do it in the first input. I need him to calculate on the others inputs.

Follows the code:

// A função que multiplica o preço do produto pela quantidade:
function calcular_preco_produto() {
    var n1 = parseInt(document.getElementById('input_quantidade_venda[]').value, 10);
    document.getElementById('input_preco_venda[]').innerHTML = n1 * 10;
}

// A função que gera inputs dinamicamente:
$(document).ready(function () {
  var i = 1;
  $('#add').click(function () {
    i++;

    $('#dynamic_field_venda').append('<tr class= "row" id="row' + i + '"><td><div class="input-field col s6"><input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate"><label class="active" for="input_produto_venda[]">Produto</label></div><div class="input-field col s2"><input placeholder=" " name="input_quantidade_venda[]" id="input_quantidade_venda[]" type="text" class="validate" value="1" onkeyup="calcular_preco_produto()"><label class="active" for="input_quantidade_venda[]">Quantidade</label></div><div class="input-field col s2"><div id="input_preco_venda[]"></div><label class="active" for="input_preco_venda[]">Preço</label></div><div class="input-field col s2"><button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3 btn btn-danger btn_remove" name="remove" id="' + i + '"><i class="material-icons">remove</i></button></div></td> </tr>');
  });

  $(document).on('click', '.btn_remove', function () {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="cadastro_venda" id="cadastro_venda">
       <div class="table-responsive">
          <table class="table table-bordered" id="dynamic_field_venda">
             <tr class="row">
                <td>
                   <div class="input-field col s6">
                      <input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate">
                      <label class="active" for="input_produto_venda[]">Produto</label>
                   </div>
                   <div class="input-field col s2">
                      <input placeholder=" " name="input_quantidade_venda[]" id="input_quantidade_venda[]" type="text" class="validate" value="1" onkeyup="calcular_preco_produto()">
                      <label class="active" for="input_quantidade_venda[]">Quantidade</label>
                   </div>
                   <div class="input-field col s2">
                      <div id="input_preco_venda[]"></div>
                      <label class="active" for="input_preco_venda[]">Preço</label>
                   </div>
                   <div class="input-field col s2">
                      <button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3" id="add" name="add" ><i class="material-icons">add</i></button>
                   </div>
                </td>
             </tr>
          </table>
          <a type="button" name="submit" id="submit" class="waves-effect waves-light grey darken-3 btn fonte_button modal-trigger"><i class="material-icons left">attach_money</i>Registrar Venda</a>
       </div>
    </form>

Answer 1

Do not use clasps [] in id’s. In fact, neither id’s should be used, because you are repeating them when adding a new element. Switch to class repeated id’s. Brackets should only come in the attribute name.

Avoid using onkeyup="função()". In my opinion it makes the code more polluted and bad to work with, and you can’t even put the call function within the scope of .ready.

Use an event keyup using jQuery and play the calculation value in the div with the input class, using the :eq(índice) jQuery. That is, each index input 0 has a div with index 0, as well as an index 1 has a div with the same index.

Summarizing: remove all onkeyup’s, the function calcular_preco_produto(), exchange id’s for class, leave brackets only in name's and place inside the .ready the Event Handler below:

// A função que multiplica o preço do produto pela quantidade:
$(document).on("keyup", ".input_quantidade_venda", function(){

   // pego o índice da classe
   var indice = $(".input_quantidade_venda").index(this);

    var n1 = parseInt(this.value, 10);
    // aplico a outra classe com o mesmo índice
    $('.input_preco_venda:eq('+indice+')').html(n1 * 10);

});

See how much simpler it is:

// A função que gera inputs dinamicamente:
$(document).ready(function () {
   
   // A função que multiplica o preço do produto pela quantidade:
   $(document).on("keyup", ".input_quantidade_venda", function(){
   
      // pego o índice da classe
      var indice = $(".input_quantidade_venda").index(this);
      
       var n1 = parseInt(this.value, 10);
       // aplico a outra classe com o mesmo índice
       $('.input_preco_venda:eq('+indice+')').html(n1 * 10);
      
   });
   
  var i = 1;
  $('#add').click(function () {
    i++;

    $('#dynamic_field_venda').append('<tr class= "row" id="row' + i + '"><td><div class="input-field col s6"><input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate"><label class="active" for="input_produto_venda[]">Produto</label></div><div class="input-field col s2"><input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1"><label class="active" for="input_quantidade_venda[]">Quantidade</label></div><div class="input-field col s2"><div class="input_preco_venda"></div><label class="active" for="input_preco_venda[]">Preço</label></div><div class="input-field col s2"><button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3 btn btn-danger btn_remove" name="remove" id="' + i + '"><i class="material-icons">remove</i></button></div></td> </tr>');
  });

  $(document).on('click', '.btn_remove', function () {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="cadastro_venda" id="cadastro_venda">
    <div class="table-responsive">
       <table class="table table-bordered" id="dynamic_field_venda">
          <tr class="row">
             <td>
                <div class="input-field col s6">
                   <input placeholder="Digite o Produto" name="input_produto_venda[]" type="text" class="validate">
                   <label class="active" for="input_produto_venda[]">Produto</label>
                </div>
                <div class="input-field col s2">
                   <input placeholder=" " name="input_quantidade_venda[]" class="input_quantidade_venda" type="text" class="validate" value="1">
                   <label class="active" for="input_quantidade_venda[]">Quantidade</label>
                </div>
                <div class="input-field col s2">
                   <div class="input_preco_venda"></div>
                   <label class="active" for="input_preco_venda[]">Preço</label>
                </div>
                <div class="input-field col s2">
                   <button type="button" class="btn-floating btn-large waves-effect waves-light grey darken-3" id="add" name="add" ><i class="material-icons">add</i></button>
                </div>
             </td>
          </tr>
       </table>
       <a type="button" name="submit" id="submit" class="waves-effect waves-light grey darken-3 btn fonte_button modal-trigger"><i class="material-icons left">attach_money</i>Registrar Venda</a>
    </div>
 </form>