JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript">
$(document).ready(function() {
var postURL = "addmore.php";
var i = 1;
$('#add').click(function() {
i++;
$('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="quantity[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="text" name="measure[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="number" name="discount[]" class="form-control name_list" required="" /></td> <td width="12.5%"><input type="number" disabled name="total[]" class="form-control name_list" required="" /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
});
function computeSum() {
var totalPrice = 0;
$('input[name="total[]"]').each(function(key, total) {
totalPrice += parseInt(total.value, 10);
});
console.log('totalPrice')
$('#totalWithoutVat').text(totalPrice)
}
$(document).on('click', '.btn_remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$(document).on('keyup', 'input[name="quantity[]"]', function(e) {
var quantity = $(e.target);
if (quantity.val()) {
var tr = quantity.closest('tr');
var measure = tr.find('input[name="measure[]"]');
var total = tr.find('input[name="total[]"]');
total.val(measure.val() * quantity.val());
computeSum();
}
});
$(document).on('keyup', 'input[name="measure[]"]', function(e) {
var measure = $(e.target);
if (measure.val()) {
console.log(measure.val());
var tr = measure.closest('tr');
var quantity = tr.find('input[name="quantity[]"]');
var total = tr.find('input[name="total[]"]');
...