how multiply in jquery

Question

i am newer in jquery And I have a problem in Multiply with jquery my sample Form is :

The first line of the form is calculated correctly But multiplication is not done from the second line.

MyCode is :

$(document).ready(function () {
      var rowIdx = 0;
      $('#addBtn').on('click', function () {
        $('#tbody').append(`<tr id="R${++rowIdx}">
            <td>${rowIdx}</td>
            <td>
                <select id="group" name="group" class="form-control form-select">
                    @foreach($groups as $group)
                        <option>{{ $group->title }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" name="number" id="a1"></td>
            <td><input type="number" name="price" id="a2"></td>
            <td><input type="number" name="total_price" id="a3"></td>
            <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button">Remove</button>
                </td>
        </tr>`);

        $('#a1').keyup(calculate);
        $('#a2').keyup(calculate);
        function calculate(e)
        {
            $('#a3').val($('#a1').val() * $('#a2').val());
        }
      });

      $('#tbody').on('click', '.remove', function () {
        var child = $(this).closest('tr').nextAll();
        child.each(function () {
          var id = $(this).attr('id');
          var idx = $(this).children('.row-index').children('p');
          var dig = parseInt(id.substring(1));
          idx.html(`Row ${dig - 1}`);
          $(this).attr('id', `${dig - 1}`);
        });
        $(this).closest('tr').remove();
        rowIdx--;
      });

    });

Answer 1

You can use $(this).closest("tr") to get closest tr where keyup/change has been taken place then using same get required input values and add total to your total_price inputs .

Demo Code :

$(document).ready(function() {
  var rowIdx = 0;
  $('#addBtn').on('click', function() {
    $('#tbody').append(`<tr id="R${++rowIdx}">
            <td>${rowIdx}</td>
            <td>
                <select id="group" name="group" class="form-control form-select">
                    @foreach($groups as $group)
                        <option>{{ $group->title }}</option>
                    @endforeach
                </select>
            </td>
            <td><input type="number" min ="0" value="0" name="number"></td>
            <td><input type="number" min ="0" value="0" name="price"></td>
            <td><input type="number"min ="0" value="0" name="total_price"></td>
            <td class="text-center">
                <button class="btn btn-danger remove"
                  type="button">Remove</button>
                </td>
        </tr>`);

  });
  //on key up or change
  $(document).on("change keyup", "tbody input[type=number]", function() {
    var qty = 0,
      total = 0;
    //get closest tr
    var selector = $(this).closest("tr")
    //get numer & price from same row
    var number = parseInt(selector.find("[name=number]").val())
    var price = parseInt(selector.find("[name=price]").val())
    //add total in totalprice in same row
    selector.find('[name=total_price]').val(number * price);
    //loop thorugh each trs 
    $("#tbody tr").each(function() {
      //add value of each inputs
      qty += parseInt($(this).find("[name=number]").val())
      total += parseInt($(this).find("[name=total_price]").val())
    })
    //add result in dom..
    $("#qty").text(qty);
    $("#total").text(total);

  })


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="tbody"></tbody>
</table>
<button id="addBtn" type="button">Add</button> <br/>Total qty : <span id="qty"></span> <br/>Total price : <span id="total"></span>

Answer 2

Here is a version of selector that might work for you.

let parentTR = $(this).parents('tr')[0];
let resultInput = $(parentTR).find("#a3");
resultInput.val($(parentTR).find("#a1").val() * $(parentTR).find("#a2").val());