JSFiddle - React, Tailwind, and code Playground

HTML

<form id="CalcInvoiceMatching" method='post' enctype="multipart/form-data" action='postinvmatchgrid.asp?Action=Save'>
 	<div class="box-content no-padding">
 	<div class="row">
 	 
 	<!-- Purchase Order details -->
 	<div class="col-xs-12 col-sm-5">
 	<div class="box">
 	<div class="box-header">
 	<div class="box-name">
 	<i class="fa fa-table"></i>
 	<span>Purchase Order</span>
 	</div>
 	<div class="no-move"></div>
 	</div>
 	<div class="box-content">
 	 
 	<input type="text" style="font-size:10px;" Placeholder="Code" size="10" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="Description" size="30" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="Supp/Code" size="10" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="Qty" size="4" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="Unit Price" size="6" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="Net" size="5" disabled/>
 	<input type="text" style="font-size:10px;" placeholder="I/M" size="1" disabled/>
 	 
 	<div>
 	 
 	 
 	 
 	 
 	<div>
 	<input type="text" style="font-size:10px;" size="10" name="PO_LookupCode" value="111964" />
 	<input type="text" style="font-size:10px;" size="30" name="PO_ItemDescription" value="Outhwaite Coat Pad Line Blu 36" readonly />
 	<input type="text" style="font-size:10px;" size="10" name="PO_OrderNumber" value="5/DJW14PB" readonly>
 	<input type="text" style="font-size:10px;" size="4" name="PO_QuantityReceived" value="1" />
 	<input type="text" style="font-size:11px; text-align:right;" size="5" name="PO_Price" value="7.7" readonly />
 	<input type="text" style="font-size:10px; text-align:right;" size="5" name="PO_Net" value="7.7" readonly />
 	<input type="checkbox" size="1" name="Per_PO1" id="Per_PO1" value="1" />
 	</div>
 	 
 	 
 	 
 	<div>
 	<input type="text" style="font-size:10px;" size="10" name="PO_LookupCode" value="111965" />
 	<input type="text" style="font-size:10px;"...

CSS

.plusminus,.tit {
    font-weight: bold;
    font-family: monospace;
    font-size: 1.3em;
    border: 1px green solid;
    padding: 0px 5px;
  }
.plusminus{cursor:pointer;}
.tit { border: 1px solid #ccc;}
input[type="text"][disabled]{
	text-align: center;
	color: red;
}

JavaScript

$('input.Row').each(function(){$(this).val('Row nuber: '+$(this).parent('div').find('div').length)})
function calculateTot(elem){
var ind=elem.parent().index()+1
var totSum=0,totQty=0,totDisc=0,totPrice=0
var collection1=elem.parents('div').find('input.sum')
var collection2=elem.parents('div').find('input.qty')
var collection3=elem.parents('div').find('input.discount')
var collection4=elem.parents('div').find('input.price')
for(i=0;i<collection1.length;i++){
 totSum+=parseFloat(collection1.get(i).value)
 totQty+=parseFloat(collection2.get(i).value)
 totDisc+=parseFloat(collection3.get(i).value)
 totPrice+=parseFloat(collection4.get(i).value)
 
 }
elem.parents('div').find('input.Amount').val(totSum.toFixed(3))
elem.parents('div').find('input.TotQtyReceived').val(totQty.toFixed(0))
elem.parents('div').find('input.TotRounding').val(totDisc.toFixed(2))
elem.parents('div').find('input.result').val(totPrice.toFixed(3))
elem.get(0).className==='plusminus'?elem.parents('div').find('input.Change').val('Changed: Qty row:'+ind):
elem.parents('div').find('input.Change').val('Changed: '+elem.get(0).className+' row:'+ind)
}
 
function calculateScount(elem){
var thisVal=parseFloat(elem.val())
var qty =parseInt(elem.parent().find('input.qty').val())
var price=parseFloat(elem.parent().find('input.price').val())
var vatrateValue=parseFloat(elem.parent().find('input.vatrate').val())
var SuppStdDiscValue=parseFloat(elem.parent().find('input.SuppStdDisc').val())
elem.parent().find('input.sum').val((price*qty+thisVal).toFixed(3))
calculateTot(elem) 
if(vatrateValue>0){elem.parent().find('input.vat').val(((price*qty+thisVal)*0.2).toFixed(3));}
}
function calculate(elem){
var qty =parseInt(elem.parent().find('input.qty').val())
var price=parseFloat(elem.parent().find('input.price').val())
var scontValue=parseFloat(elem.parent().find('input.discount').val())
var vatrateValue=parseFloat(elem.parent().find('input.vatrate').val())
var...