JSFiddle - React, Tailwind, and code Playground
HTML
<div id="TotalInvoiceAmt"></div>
<div id="TotalTransferAmt"></div>
<table class="transfer-group-table table table-hover tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Invoice #</th>
<th>Invoice Amount</th>
<th>Order Status</th>
<th>Payment Menthod</th>
<th>Service Fee</th>
<th>Funding Fee</th>
<th>Delivery Date</th>
<th>Transfer Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr id="2942">
<td>
<p>A Company Ltd</p>
</td>
<td>
<p>18602</p>
</td>
<td class="AmountLoaned">
<p>324.00</p>
</td>
<td>
<p>Completed</p>
</td>
<td>
<p>BACS</p>
</td>
<td class="ServiceCharge">
<p>0.04</p>
</td>
<td class="FeeAmount">
<p>4.54</p>
</td>
<td>
<p>May 29, 2015</p>
</td>
<td class="TransferAmount">
<p>2.50</p>
</td>
<td>
<input type="checkbox" class="totalamountcb">
</td>
</tr>
</tbody>
JavaScript
$('.totalamountcb').change(function () {
calculateInvoiceTotals();
calculateTransferTotals();
}).change();
// Calculate the total invoice amount from selected items only
function calculateInvoiceTotals() {
var Sum = 0;
// iterate through each td based on class and add the values
$(".AmountLoaned").each(function () {
//Check if the checkbox is checked
if ($(this).closest('tr').find('.totalamountcb').is(':checked')) {
var value = $('p', this).text();
// add only if the value is number
if (!isNaN(value) && value.length != 0) {
Sum += parseFloat(value);
}
}
});
$('#TotalInvoiceAmt').text(Sum.toFixed(2));
};
// Calculate the total transfer amount from selected items only
function calculateTransferTotals() {
var Sum = 0;
$(".TransferAmount").each(function () {
//Check if the checkbox is checked
if ($(this).closest('tr').find('.totalamountcb').is(':checked')) {
var value = $('p', this).text();
// add only if the value is number
if (!isNaN(value) && value.length != 0) {
Sum += parseFloat(value);
}
}
});
$('#TotalTransferAmt').text(Sum.toFixed(2));
};