One issue if that the newly-added column id’s are missing the id number. If you look at the id, it only shows “price-“, when it should probably be “price-2-1”, since the original ones are “price-1”, and the original ones should probably be something like “price-1-1”.
Aside from that, the problem is you need to also add the event listeners to the newly-created items:
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
$(".price").each(function () {
$(this).keyup(function () {
multInputs();
});
});
});
With the method below you can search the fields according to proximity, thus being able to make the calculations with the necessary parameters.
$(function(){
$('#add_supplier').click(function(){
$('#supplier_table > thead > tr#first-header').append(
'<th colspan="2">Supplier</th>'
);
$('#supplier_table > thead > tr#second-header').append(
'<th>Price</th>'+
'<th>Total</th>'
);
$('#supplier_table > tbody > tr').append(
'<td><input type="text" class="form-control price" id="price-"></td>'+
'<td><input type="text" class="form-control total" id="total-" readonly></td>'
);
bindPrice();
});
bindPrice();
});
function bindPrice(){
$('.price').off().on('keyup', function(){
$total = $(this).parents().eq(0).next().find('.total');
$qty = $(this).parents().eq(1).find('.qty');
$total.val($(this).val() * $qty.val() )
});
}
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
#supplier_table thead th,
td {
text-align: center;
}
</style>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<button type="button" class="btn btn-default" id="add_supplier">Add Supplier</button>
<table class="table table-bordered" id="supplier_table">
<thead>
<tr id="first-header">
<th></th>
<th></th>
<th colspan="2">Supplier</th>
</tr>
<tr id="second-header">
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Mouse" readonly=""></td>
<td><input type="text" class="form-control qty" id="qrt-1" value="10" readonly=""></td>
<td><input type="text" class="form-control price" id="price-1"></td>
<td><input type="text" class="form-control total" id="total-1" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Keyboard" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-3" value="20" readonly=""></td>
<td><input type="text" class="form-control price" id="price-3"></td>
<td><input type="text" class="form-control total" id="total-3" readonly></td>
</tr>
<tr class="tbody-tr">
<td><input type="text" class="form-control" id="usr" value="Monitor" readonly=""></td>
<td><input type="text" class="form-control qty" id="qty-5" value="30" readonly=""></td>
<td><input type="text" class="form-control price" id="price-5"></td>
<td><input type="text" class="form-control total" id="total-5" readonly></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>