JSFiddle - React, Tailwind, and code Playground

by Karmik Patel

HTML

<table style="width:100%">
                    <tbody><tr style="font-size:small;">
                        <th style="width:3%;">&nbsp;</th>
                        <th style="width:15%;">Desc.</th>
                        <th style="width:15%;">Price</th>
                        <th style="width:10%;">Term</th>
                        <th style="width:10%;">Program</th>
                        <th style="width:10%;">Qty</th>
                        <th style="width:10%;">Hst</th>
                        <th style="width:10%;">Borrowed Amount</th>
                        <th style="width:10%;">Monthly Pay</th>
                    </tr>
                          
                            <tr>
                                <td>
                                    <div>
                                        <input class="prodCheck" dataprice="5000.00" datarate="170.55001" id="5543d1bb-6366-4a87-b342-e76ed2c83af5" name="5543d1bb-6366-4a87-b342-e76ed2c83af5" type="checkbox" value="true"><input name="5543d1bb-6366-4a87-b342-e76ed2c83af5" type="hidden" value="false">
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        amanproduct
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        $5,000.00
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        120
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        LOAN
                                    </div> 
                             ...

JavaScript

formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2
    });
    
$('.prodCheck').on("change",function() {
  if ($(this).is(':checked')) {
    //console.log($(this).attr("data"));
    //console.log($(this).attr("id"));
    calcInternal($(this).attr("id"),$(this).attr("data"));
  }else{
    //console.log($(this).attr("data"));
    //console.log($(this).attr("id"));
    calcInternal($(this).attr("id"),$(this).attr("data"));
  }
});

   function calcInvidualTotal(qtyId,amtSupplied) {
   			var amt=amtSupplied.replace(/[^0-9.]/g, '');
   			//console.log(amt);
        var qty = Number(document.getElementById("QTY-"+qtyId).value);
        if(qty < 1 || qty > 5 || !Number.isInteger(qty)){
        	alert("Invalid Quantity ["+qty+"] Try Again");
          document.getElementById("QTY-"+qtyId).value=1;
        	qty = 1;
        }
        //console.log(qty);
        //console.log((amt*qty).toFixed(2));
        return ((amt*qty).toFixed(2));
  } 
   
   function getToalAmount(){
   		var tot=0;
      $('.prodCheck').each(function() {
          //selected.push($(this).val());
          if ($(this).is(':checked')){
          	tot = (Number(tot) + Number(calcInvidualTotal($(this).attr("id"),$(this).attr("dataprice"))));
          }
      });
      return tot;
   }
   
   function calc() {
   		//var selected = [];
      var totalAmount = getToalAmount();
      //console.log(totalAmount);
      $('#totalAmt').text(formatter.format(totalAmount));
      var hstAmount = (((totalAmount) * 13) / 100).toFixed(2);
      $('#hstAmt').text(formatter.format(hstAmount));
      var borrAmount = Number(totalAmount)+Number(hstAmount);
      $('#borrowedAmt').text(formatter.format(borrAmount));
      var intrIdentifier = 0.01321;
      $('#monthlyAmt').text(formatter.format((borrAmount*intrIdentifier).toFixed(2)));
  }        
       
       /*var amt = getAmt();
        amt = amt.replace(/[^0-9.]/g, '');
       ...