JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Price Breakdown</h1>
<table>
<tr>
<td>Item Group</td>
<td>Name</td>
<td>Code</td>
<td>Quantity</td>
<td>Unit Cost Price</td>
<td>Unit Selling Price</td>
</tr>
<tr>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='number' /></td>
<td><input type='number' /></td>
<td><input type='number' /></td>
</tr>
<tr>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='text' /></td>
<td><input type='number' /></td>
<td><input type='number' /></td>
<td><input type='number' /></td>
</tr>
<tr>
<td colspan="4" style="text-align: right; padding-right: 10px; font-weight: bold;">Total Price</td>
<td><input type='number' /></td>
<td><input type='number' /></td>
</tr>
</table>
JavaScript
$('input').keyup( function(self) {
var buyCostAcc = 0;
var sellCostAcc = 0;
$($($($(this).parent().parent().parent()).children()).slice(1, -1)).each(function(self){
var quantity = $($(this).children()[3]).children().val();
var buyCost = $($(this).children()[4]).children().val();
var sellCost = $($(this).children()[5]).children().val();
buyCostAcc += quantity * buyCost;
sellCostAcc += quantity * sellCost;
});
$($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[1]).children()).val(buyCostAcc);
$($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[2]).children()).val(sellCostAcc);
});