JSFiddle - React, Tailwind, and code Playground

by Pranav C

HTML

<table>
<tr>
<td><input type="text"></td>
<td><input class="price" type="text" value="100"></td>
<td><input class="quantity" type="text" value="2"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input class="price" type="text" value="100"></td>
<td><input class="quantity" type="text" value="5"></td>
<td><input type="text"></td>
</tr>
<tfoot>
<tr class="summary">
<td>Total:</td>
<td id="total_price"></td>
<td id="total_quantity"></td>
<td class="second"></td>
<td class="third"></td>
</tr>
</tfoot>    
</table>

JavaScript

$(document).ready(function() {
    var sum = 0;
    var quantity = 0;
    $('.price').each(function() {
        var price = $(this);
        var q = price.closest('tr').find('.quantity').val();
        sum += parseInt(price.val()) * parseInt(q);
        quantity += parseInt(q);
    });

    $('#total_price').html(sum);
    $('#total_quantity').html(quantity);
});