JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="33%">SIZE</td>
<td width="33%">QUANTITY</td>
<td width="33%">CUBICS</td>
</tr>
<tr>
<td width="33%">07" E Flute</td>
<td width="33%">
<input id="07flute" type="text" value="0" />
</td>
<td width="33%"><span id="cubics"></span>
</td>
</tr>
<tr>
<td width="33%">08" E Flute</td>
<td width="33%">
<input id="08flute" type="text" value="0" />
</td>
<td width="33%"><span id="cubics2"></span>
</td>
</tr>
<tr>
<td width="33%">09" E Flute</td>
<td width="33%">
<input id="09flute" type="text" value="0" />
</td>
<td width="33%"><span id="cubics3"></span>
</td>
</tr>
<tr class="bg">
<td width="33%">TOTAL</td>
<td width="33%"><span class="totalquantity"></span>
</td>
<td width="33%"><span class="totalcubics"></span>
</td>
</tr>
</table>
CSS
.bg {
background:#c20;
color:#FFFFFF;
}
JavaScript
function doSum(){
var one = parseFloat($("#cubics").text(),10);
if(isNaN(one)) one = 0;
var two = parseFloat($("#cubics2").text(),10);
if(isNaN(two)) two = 0;
var three = parseFloat($("#cubics3").text(),10);
if(isNaN(three)) three = 0;
$('.totalcubics').text(one+two+three);
}
$("#07flute").keyup(function () {
var val = parseFloat($(this).val());
val = (val ? val / 50 * 4.0113 : "Invalid number");
$("table #cubics").text(val);
doSum();
});
$("#08flute").keyup(function () {
var val = parseFloat($(this).val());
val = (val ? val / 50 * 0.0128 : "Invalid number");
$("#cubics2").text(val);
doSum();
});
$("#09flute").keyup(function () {
var val = parseFloat($(this).val());
val = (val ? val / 50 * 0.0128 : "Invalid number");
$("#cubics3").text(val);
doSum();
});