JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
            <table id="table-shop">
                <tr id="line1">
                    <td class="class_unit">Valor Unitário 01:<input type="text" name="valor_unitario01" id="valor_unitario01" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt01" id="qnt01" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total01" id="total01" readonly="readonly" /></td>
                </tr>
                <tr id="line2">
                    <td class="class_unit">Valor Unitário 02:<input type="text" name="valor_unitario02" id="valor_unitario02" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt02" id="qnt02" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total02" id="total02" readonly="readonly" /></td>
                </tr>
                <tr id="line3">
                    <td class="class_unit">Valor Unitário 03:<input type="text" name="valor_unitario03" id="valor_unitario03" /></td>
                    <td class="class_quant">Quantidade: <input type="text" name="qnt02" id="qnt02" value="0" /></td>
                    <td class="class_total">Total: <input type="text" name="total02" id="total02" readonly="readonly" /></td>
                </tr>
            </table>
            <div id="total">Total: <span class="value_total"></span> </div>
    <div id="total">Total: <input class="value_total" readonly></input> </div>
        </form>

JavaScript

function id( el ){
        //return document.getElementById( el );
        return $( el );
}
function calcTotal( un01, qnt01 )
{
        return un01 * qnt01;
}
function getElementParent(event){
    return event.srcElement.parentNode.parentNode.getAttribute('id');
}
function getValorUnitario(elParent){
    return $('#'+elParent+' .class_unit input').val();
}
function getQuantidade(elParent){
    return $('#'+elParent+' .class_quant input').val();
}
function setFieldTotal(elParent, valueUnit, valueQuant){
    id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant));
    setTotalFinal();
}
function setTotalFinal(){
    
    var total = 0;
    $('#table-shop tr .class_total input').each(function(){
        if(this.value != ''){
        var valor = this.value;
        total += parseInt(valor);
        }
    });
    $('#total .value_total').html(total);
    $('#total .value_total').val(total);
}
$(document).ready(function(){
        id('#table-shop tr .class_unit').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });      
       
        id('#table-shop tr .class_quant').keyup(function(event)
        {
            var elemenPai = getElementParent(event);
            var valueUnit = getValorUnitario(elemenPai);
            var valueQuant = getQuantidade(elemenPai);

            setFieldTotal(elemenPai, valueUnit , valueQuant);
        });
});