JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" enctype="multipart/form-data">
<p>Add your ingredients below.</p>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<br>
<br>
<div class="datagrid">
        <TABLE id="dataTable" width="350px" border="1" style="border-collapse:collapse;">
        <TR>
        <TH>Select</TH>
        <!--TH>Sr. No.</TH-->
        <TH>Ingredient</TH>
        <TH>Cost of Ingredient</TH>
        <TH>Quantity Used</TH>
        <TH formula="cost*qty"summary="sum">Price</TH>
        </TR>
            <TR>
                <TD><INPUT type="checkbox" name="chk[]"/></TD>
                <!--TD> 1 </TD-->
                <TD> <INPUT type="text" name="item[] "/> </TD>
                <TD> <INPUT type="text" id="cost1" name="cost[]" /> </TD>
                <TD> <INPUT type="text" id="qty1" name="qty[]"/> </TD>
                <TD> <INPUT type="text" id="price1" name="price[]" /> </TD>
            </TR>
        </TABLE>
    </div>
<br>
<br>
        total: <input type="text" readonly="readonly" id="total" />
<br>
<br>
        <!-- revenue: <input type="text" readonly="readonly" id="revenue" /> -->
<br>
<br>       
        <!--input type="button" value="Total" onclick="totalIt()" /-->
        <!--input type="button" value="Revenue" onclick="revrev()" /-->

        <!--input type="submit" /-->
		
		</form>

JavaScript

function calc(idx) {
  var price = parseFloat(document.getElementById("cost"+idx).value)*
              parseFloat(document.getElementById("qty"+idx).value);
  //  alert(idx+":"+price);  
  document.getElementById("price"+idx).value= isNaN(price)?"0.00":price.toFixed(2);
}

function totalIt() {
  var qtys = document.getElementsByName("qty[]");
  var total=0;
  for (var i=1;i<=qtys.length;i++) {
    calc(i);  
    var price = parseFloat(document.getElementById("price"+i).value);
    total += isNaN(price)?0:price;
  }
  document.getElementById("total").value=isNaN(total)?"0.00":total.toFixed(2);                        
}

function getNum(val) {
   if (isNaN(val)) {
     return "";
   }
   return val;
}

function revrev() {
  	var sales_price =  parseFloat(document.getElementById("sales_price").value);
  	var total =parseFloat(document.getElementById("total").value);
  	//var sales_price = 100;
  	//var total = 30;
	var revenue = sales_price - total;
	document.getElementById("revenue").innerHTML = getNum(revenue);
	}


// Event Listners - to trigger totals and revenue calculations
// On Quantitiy Change:
var qtys = document.getElementsByName("qty[]");
var i;
for (i = 0; i < qtys.length; ++i) {
    qtys[i].addEventListener("change", totalIt, false);
    qtys[i].addEventListener("input", totalIt, false);
}

var qtys = document.getElementsByName("qty[]");
var i;
for (i = 0; i < qtys.length; ++i) {
    qtys[i].addEventListener("change", revrev, false);
    qtys[i].addEventListener("input", revrev, false);
}

// On Sales Price Change
var sales_prices = document.getElementsByName("sales_price");
var i;
for (i = 0; i < sales_prices.length; ++i) {
    sales_prices[i].addEventListener("change", revrev, false);
    sales_prices[i].addEventListener("input", revrev, false);
}

// On Cost Change
var costs = document.getElementsByName("cost[]");
var i;
for (i = 0; i < costs.length; ++i) {
    costs[i].addEventListener("change", totalIt, false);
   ...