JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" id="calculaTotal">
    <thead>
        <tr>
            <th>Quantidade</th>
            <th>Valor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="text" />
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </tbody>
</table>
<p>Total: <span class="total">0</span>

</p>

CSS

table {
    border-collapse:collapse;
    border:1px solid #ccc;
}

JavaScript

$(document).on('keyup', '#calculaTotal tbody td input', function () {
    var total = 0;
    $('#calculaTotal tbody tr').each(function () {
        var td = $(this).children('td');
        total += td.eq(0).children('input').val() * td.eq(1).children('input').val();
    });
    $('.total').html(total);
});