JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=151399'>
  <input size='1' type='hidden' name='id[3]' value='1582' readonly/>
  <input type='hidden' name='sum_input' id='sum_input' value=''>
  <div align="center">
    <table width="100%" border="1" style="border-collapse: collapse;">
      <thead>
        <tr bgcolor="#E6E6FA">
          <th width=6%>SlNo</th>
          <th width=15%>Description</th>
          <th width=5%>Qty</th>
          <th width=5%>Unit Price</th>
          <th width=5%>Total</th>
          <th width=8%>Total (INR)</th>
          <th width=7%>Total Value</th>
          <th width=7%>Currency</th>
          <th width=7%>Total</th>
          <th width=7%>Price/Unit</th>
        </tr>
      </thead>
      <tbody id="people">
        <tr>
          <td width='6%'>
            <input size='1' type='hidden' name='id[0]' value='1579' readonly/>
            <input size='1' type='text' name='sl[0]' value='1' readonly/>
          </td>
          <td width='15%' id='addinput'>
            <input type='text' size='19' id='item_name0' name='item_name[0]' placeholder='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' value='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' />
          </td>
          <td width='5%'>
            <input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='10' readonly/>
          </td>
          <td width='5%'>
            <input size='1' type='text' name='unitprice[0]' value='223.15' readonly/>
          </td>
          <td width='5%'>
            <input size='5' type='text' name='total_old' value='2231.500' readonly/>
          </td>
          <td width='8%'>
            <input size='7' type='text' id='total_inr[]' name='total_inr[]' value='219479.000' />
          </td>
          <input class='txt' type='hidden' size='3' id='addon_value[]'...

JavaScript

function getIndexedElement(item, index) {
               if (item.length) {
                   if (index < item.length) {
                       return item[index];
                   }
                   else {
                       return false;
                   }
               }
               else {
                   if (index === 0) {
                       return item;
                   }
               }
               return false;
           }
           function isNum(value) {
               return 123;
           }
           
           function calcTotals() {
               var grandTotal = 0;
           	var margin_total = 0;
           	var totalinr_total = 0;
               var i = 0;
           
               while (getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i)) {
                   add_percentageObj = getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i);
                   addon_valueObj = getIndexedElement(document.forms['cart'].elements['addon_value[]'], i);
                   total_inr_valueObj = getIndexedElement(document.forms['cart'].elements['total_inr[]'], i);
           
                   totalObj = getIndexedElement(document.forms['cart'].elements['add_value[]'], i);
                   priceunitObj = getIndexedElement(document.forms['cart'].elements['price_unit[]'], i);
           
                   qtyObj = getIndexedElement(document.forms['cart'].elements['qty[]'], i);
                   marginObj = getIndexedElement(document.forms['cart'].elements['margin_for[]'], i);
           
           
                   if (isNaN(add_percentageObj.value)) {
                       add_percentageObj = '';
                   }
                   if (isNaN(addon_valueObj.value)) {
                       addon_valueObj = '';
                   }
           
                   if (add_percentageObj.value != 0) {
                       totalObj.value = (((total_inr_valueObj.value * 1) *...