JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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>
        <div class="clone_row">
          <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"...

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

$(window).load(function(){
jQuery(document).ready(function($){
   $("#add_more").on('click', function(e){
   		e.preventDefault();
        var clone = $(".clone_row").eq(0).clone();
        $("#cart1").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));
      }
		
			$(document).ready(function(){
				//$("select").change(function (event, processing) {
				$(".currency-select").change(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...