<table class="table table-bordered table-hover table-striped .table-bordered" id="invoice_table" style="width:100%">
<thead>
<tr>
<th width="50">
<h4><a href="#" class="btn btn-success btn-xs add-row"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a> </h4>
</th>
<th width="200">
<h4 align ="Center">Item</h4>
</th>
<th width="200">
<h4 align ="Center">Qty</h4>
</th>
<th width="200">
<h4 align ="Center">Net Weight</h4>
</th>
<th width="200">
<h4 align ="Center">Rate</h4>
</th>
<th width="400" >
<h4 align ="Center">Sub Total </h4>
</th>
</tr>
</thead>
<tbody>
<td>
<a href="#" class="btn btn-danger btn-xs delete-row"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
</td>
<td >
<select name="item_id[]" id="item_cd_1" class="form-control" autocomplete="off">
<option value=''>Select Item</option>
<?php
$sql = mysqli_query($mysqli , "SELECT * FROM item ORDER BY descr");
while ($row = mysqli_fetch_array($sql)) {
$id = $row['code'];
$name = $row['descr'];
?>
<option value='<?php echo $id; ?>'><?php echo $name; ?></option>
<?php } ?>
</select>
</td>
<td>
<input type="number" class="form-control quantity" id="quantity" name="quantity[]" placeholder="Quantity" required>
</td>
<td>
<input type="number" class="form-control calculate" id="net_wt" name="net_wt[]" placeholder="Net Wt." required>
</td>
<td>
<input type="number" class="form-control calculate" id="rate" name="rate[]" placeholder="Rate" required>
</td>
<td>
<input type="number" class="form-control amount" id="amount" name="amount[]" placeholder="Amount" disabled>
</td>
</tbody>
</table>
Above is my html code. below is the jquery code.
$('#invoice_table').on("keyup",".calculate",function(){
var parent = $(this).closest('tr');
var quant= $(parent).find('#net_wt').val();
var price= $(parent).find('#rate').val();
$(parent).find('#amount').val(quant* price);
$('.amount').each(function() {
sum += $(this).val();
});
$('#subtotal').val(sum);
});
Here the amount column is not adding subtotal at the bottom.
Help needed.