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

var total = 0;
    var editando = 0;
    var linha1;
    var linha2;

    $(document).on('focus', '#calculaTotal tbody td input', function () {
        var td = $(this).closest("tr").children('td');
        linha1 = td.eq(0).children('input')[0];
        linha2 = td.eq(1).children('input')[0];
        editando = parseInt(+linha1.value, 10) * parseInt(+linha2.value, 10);
    });

    $(document).on('keyup', '#calculaTotal tbody td input', function () {
        valor = parseInt(+linha1.value, 10) * parseInt(+linha2.value, 10);
        total = total - editando + valor;
        editando = valor;

        $('.total').html(total);
    });