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="0.01521" 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>
                                        very very long product or equipment name will be displayed here
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        $5,000.00
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        120
                                    </div> 
                                </td> 
                                <td>
                                    <div>
                                        LOAN
                       ...

JavaScript

formatter = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
        minimumFractionDigits: 2
    });
    
    $('.prodCheck').on("change",function() {
      if ($(this).is(':checked')) {
        calcInvidual($(this).attr("id"),$(this).attr("dataprice"),$(this).attr("datarate"));
        //calcInternal($(this).attr("id"),$(this).attr("data"));
        //calcFinalTotals();
      }else{
      	
        document.getElementById("HST-"+$(this).attr("id")).value = "";
        document.getElementById("BAMT-"+$(this).attr("id")).value = "";
        document.getElementById("MAMT-"+$(this).attr("id")).value = "";
        //calcFinalTotals();
      }
      calcFinalTotals();
    });

		function calcInvidual(Id,price,rate) {
   			var amt=Number(price.replace(/[^0-9.]/g, ''));
   			//console.log(amt);
        var qty = Number(document.getElementById("QTY-"+Id).value);
        if(qty < 1 || qty > 5 || !Number.isInteger(qty)){
        	alert("Invalid Quantity ["+qty+"] Try Again");
          document.getElementById("QTY-"+Id).value=1;
        	qty = 1;
        }
        //console.log(qty);
        var totalAmount = Number((amt*qty).toFixed(2));
        //console.log(totalAmount);
        var hstAmount = Number((((totalAmount) * 13) / 100).toFixed(2));
        //console.log(hstAmount);
        var borrAmount = Number((totalAmount+hstAmount).toFixed(2));
        //console.log(borrAmount);
        var monthlyAmount = Number((borrAmount*rate).toFixed(2));
        //console.log(monthlyAmount);
        document.getElementById("HST-"+Id).value = hstAmount;
        document.getElementById("BAMT-"+Id).value = borrAmount;
        document.getElementById("MAMT-"+Id).value = monthlyAmount;
        //start populating
        
		} 

    $(".qtyClass").bind('keyup mouseup', function () {
        //console.log($(this).attr("id")+"changed");
        var id = $(this).attr("id").replaceAll('QTY-', '');
        //console.log(id);
       ...