JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Item</th>
            <th>Generic Name</th>
            <th>Avaliable</th>
            <th>Rate</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>35</td>
            <td>DcoId</td>
            <td>Sirarest</td>
            <td>500</td>
            <td>2.00</td>
            <td><input type="text" class="quantity" value="0"/></td>
            <td>0.00</td>
        </tr>
        <tr>
            <td>36</td>
            <td>Nikko</td>
            <td>Parametecol</td>
            <td>212</td>
            <td>0.80</td>
            <td><input type="text" class="quantity" value="0"/></td>
            <td>0.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td id="total">0.00</td>
        </tr>
    </tfoot>
</table>

CSS

table {
    width: 100%;
}
th, td {
    box-sizing: border-box;
}
th {
    text-align: left;
}
th:nth-child(1) {
    width: 25px;
}
th:nth-child(2) {
    width: 50px;
}
th:nth-child(4) {
    width: 75px;
    text-align: right;
}
th:nth-child(5) {
    width: 50px;
    text-align: right;
}
th:nth-child(6) {
    width: 75px;
    text-align: right;
}
th:nth-child(7) {
    width: 75px;
    text-align: right;
}
td:nth-child(4) {
    text-align: right;
}
td:nth-child(5) {
    text-align: right;
}
td:nth-child(6) {
    text-align: right;
}
td:nth-child(7) {
    text-align: right;
}
input[type="text"] {
    width: 50px;
    box-sizing: border-box;
}

JavaScript

var rows = $('tbody tr');
var totalCell = $('#total');
$('.quantity').change(function() {
    var cells = $(this).closest('tr').children('td');
    var quantity = Number($(this).val());
    var available = Number(cells.eq(3).text());
    var rate = Number(cells.eq(4).text());
    if(quantity > available) {
        $(this).val(available);
        quantity = available;
    }
    var amount = (quantity * rate).toFixed(2);
    cells.eq(6).text(amount);
    var total = Number();
    $.each(rows, function(index, item) {
        total += Number($(this).children('td').eq(6).text());
    });
    totalCell.text(total.toFixed(2));
});