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">
					<th width="4%">SlNo</th>
					<th width="4%">Main Item</th>
					<th width="9%">Item Name</th>
					<th width="3%">Qty</th>
					<th width="4%">Qty Supplier</th>
					<th width="4%">Unitprice</th>
					<th width="6%">Total</th>
					<th width="6%">Currency</th>
					<th width="6%">Total INR</th>
					<th width="6%">Del</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="sinTD">
						<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 class="mainTD">
						<input size="1" id="ifmain0" name="ifmain[0]" value="Yes" type="text">
					</td>
					<td class="itemTD">
						<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 class="qtyTD">
						<input size="1" data-validation="required" name="item_quantity[]" id="item_quantity[]" value="10" type="text">
					</td>
					<td class="suppTD">
						<input size="1" data-validation="required" name="item_quantity_sup[]" id="item_quantity_sup[]" value="8" type="text">
					</td>
					<td...

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;
}
.hidden{display:none;}
.row-highlighted{background-color:red;}

JavaScript

$(document).on('click', '.delINP', function(){
    var rr = $(this).closest('tr');
    rr.addClass('row-highlighted');
    if (confirm('Are you sure you want to delete this row?')){
		    if (rr.hasClass('newTR')) rr.remove();
    }else{
        rr.removeClass('row-highlighted');
        rr.find('td.delTD input').prop('checked',false);
    }
});

$("#add_more").on('click', function(e) {
    e.preventDefault();
    var clone = $("#table tbody tr:last").clone();
		clone.addClass('newTR');
    clone.find('td.delTD input').removeClass('hidden');
		$("#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
   ...