JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" class="qty" value="0" size="5"/>
<input type="text" class="qty" value="0" size="5"/>
<input type="text" class="qty" value="0" size="5"/>
<input type="text" id="total" value="0" size="5"/>

CSS

input {
   display: block;   
}

#total {
    border: 1px solid red;   
}

JavaScript

$('input.qty').change(function() {   
    
    // Loop through all input's and re-calculate the total
    var total = 0;
    $('input.qty').each(function(){
        total += parseInt(this.value);
    });
    
    // Update the total
    $('#total').val(total);
});