how multiply in jquery - html

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());