JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Particulars</th>
    <td>Amount</td>
  </tr>
  <tr>
    <td>XXX</td>
    <td class="credit">19.68</td>
  </tr>
  <tr>
    <td>YYY</td>
    <td class="credit">20</td>
  </tr>
  <tr>
    <td>SubTotal</td>
    <td class="creditsubtotal"></td>
  </tr>
  <tr>
    <td>ZZZ</td>
    <td class="credit">$10</td>
  </tr>
  <tr>
    <td>SubTotal</td>
    <td class="creditsubtotal"></td>
  </tr>
  <tr>
    <td>GrandTotal</td>
    <td class="credittotal"></td>
  </tr>
</table>

JavaScript

$(function(){
    function credit (selector) {
         $(selector).each(function () {
             var total = 0,
             formattedTotal, numCredit, strCredit 
             column = $(this).siblings(selector).andSelf().index(this);
             $(this).parents().prevUntil(':has(' + selector + ')').each(function () {
                  strCredit = $('td.credit:eq(' + column + ')', this).html() || "";
                  console.log(strCredit);
                  numCredit = Number(strCredit.replace(/[^0-9\.]+/g,""));
                  console.log(numCredit);
                  total += parseFloat(numCredit) || 0;
             })
             formattedTotal = total.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
             $(this).html('$'+formattedTotal);
         });
    }
    credit('td.creditsubtotal');
    credit('td.credittotal');
});