JSFiddle - React, Tailwind, and code Playground

HTML

<form id="cart1" name="cart" method="post" class="single" action="price_edit_save.php?supplier_name=Jupiter+Microwave+Components+Inc&amp;tender_id=151501">
  <input size="1" id="item_id[3]" name="item_id[3]" value="6146" readonly="readonly" type="hidden">
  <input size="1" name="id[3]" value="9981" readonly="readonly" type="hidden">
  <input size="1" id="item_id[2]" name="item_id[2]" value="6147" readonly="readonly" type="hidden">
  <input size="1" name="id[2]" value="9980" readonly="readonly" type="hidden">

  <div class="clone_row">

    <table style="border-collapse: collapse;" id="table" border="1" cellpadding="2" cellspacing="2" width="100%">
      <thead>
        <tr bgcolor="#E6E6FA">
          <td width="4%">SlNo</td>

          <td width="4%">Main Item</td>

          <td width="9%">Item Name</td>

          <td width="3%">Qty</td>

          <td width="4%">Qty Supplier</td>

          <td width="4%">Unitprice</td>

          <td width="6%">Total</td>

          <td width="6%">Currency</td>

          <td width="6%">Total INR</td>

        </tr>
      </thead>
      <tbody>
        <tr>

          <td width="4%">
            <input size="1" name="id[0]" value="9978" readonly="readonly" type="hidden">
            <input size="1" id="sl[0]" name="sl[0]" value="1" type="text">
            <input size="1" id="item_id[0]" name="item_id[0]" value="6149" readonly="readonly" type="hidden">
          </td>

          <td width="4%">
            <input size="1" id="ifmain0" name="ifmain[0]" value="Yes" type="text">
          </td>

          <td width="9%">
            <input size="15" id="item_name0" name="item_name[0]" placeholder="WR-137 WAVEGUIDE 90 DEG TWIST" value="WR-137 WAVEGUIDE 90 DEG TWIST" type="text">
          </td>

          <td width="3%">
            <input size="1" data-validation="required" name="item_quantity[]" id="item_quantity[]" value="10" type="text">
          </td>

          <td width="4%">
            <input size="1"...

CSS

a {
  text-decoration: none;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

#wrapper table {
  font-family: "helvetica", Times, serif;
  font-size: 10pt;
}

body {
  background-color: transparent;
  font-family: "helvetica", Times, serif;
  font-size: 10pt;
  color: #000000;
}

JavaScript

$("#add_more").on('click', function(e) {
  e.preventDefault();
  var clone = $("#table tbody tr:last").clone();
  $("#table tbody").append(clone);
});

$("#submit").on('click', function(e) {
  e.preventDefault();
  alert($("#cart1").serialize());
});

function calculateRowTotals(row) {
  console.log("calculateRowTotals()", row);
  var currency = row.find(".currency-select").val();
  var conversionRate = row.find(".currency-select option[value=" + currency + "]").data("price");
  var totalINR = row.find('.total').val();
  //alert (totalINR);
  //console.log(totalINR);
  //console.log(conversionRate);
  console.log("total1 => " + row.find('.total1').length);
  //var newTotal = currency==="INR" ? totalINR : (totalINR * conversionRate / row.find('.inrvalue').val()).toFixed(3);
  var newTotal = 0;
  if (currency === "INR") {
    newTotal = totalINR;
  } else if (currency === "USD") {
    newTotal = ((totalINR * row.find('.inrvalue').val()).toFixed(3));
  } else {
    newTotal = (((row.find('.inrvalue').val() / conversionRate) * totalINR).toFixed(3));
  }

  console.log("New total is " + newTotal + " & old one is " + row.find('.total1').val());
  row.find('.total1').val(newTotal);
  //row.find('.price_unit').val((newTotal/row.find('.qty').val()).toFixed(3));
}


$("#cart1").on("change", ".currency-select", function(event, processing) {
  console.log("A row changed", processing, event);
  var row = $(this).closest('tr');
  var table = row.closest('table');
  var currency = $(this).val();
  if (processing) {
    // Calculate me
    calculateRowTotals($(row));
  } else {

    // Calculate other if not processing yet
    table.find("tr").each(function() {
      $(this).find("select").val(currency).trigger("change", 1);
    });
  }
});


$('#cart1').on('change', '#table :input', function() {
  var $tr = $(this).closest('tr'),
    $totInr = $tr.find('[name="total_inr[]"]'),
    unitprice = +$tr.find('[name="unitprice[]"]').val() || 0,
    qty =...