JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Group</td>
        <td>Name</td>
        <td>Code</td>
        <td>Quantity</td>
        <td>Unit Cost</td>
        <td>Unit Selling</td>
    </tr>
    <tr>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='number' style='width: 50px;' /></td>
        <td><input type='number' style='width: 50px;' /></td>
        <td><input id="paco" type='number' style='width: 50px;' /></td>
    </tr>
    <tr>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='text' style='width: 50px;' /></td>
        <td><input type='number' style='width: 50px;' /></td>
        <td><input type='number' style='width: 50px;' /></td>
        <td><input id="paco" type='number' style='width: 50px;' /></td>
    </tr>
    <tr>
        <td colspan='3'></td>
        <td>Total</td>
        <td><input type='text' disabled='disabled' style='width: 50px;' /></td>
        <td><input type='text' disabled='disabled' style='width: 50px;' /></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()[2]).children()).val(buyCostAcc);
        $($($($($($(this).parent().parent().parent()).children()).slice(-1)).children()[3]).children()).val(sellCostAcc);
    });