JSFiddle - React, Tailwind, and code Playground

HTML

<form id="forms">
<div class="form-a">
<p>Form A</p>
input1 : <input class="formA form-1" type="text" name="qty1"/><br>
input2 : <input class="formA form-2" type="text" name="qty2"/><br>
input3 (total) : <input class="total-1" type="text" name="total" id="total"/>
<a href="javascript:sumInputs()">Sum</a>
</div>

<hr>

<div class="form-b">
<p>Form B</p>
input4 : <input class="formB form-3" type="text" name="qty3"/><br>
input5 : <input class="formB form-4" type="text" name="qty4"/><br>
input6 (total) : <input type="text" name="total" id="total2"/>
<a href="javascript:sumInputs2()">Sum</a>
</div>
<input type="reset" value="Reset">
</form>

JavaScript

window.sumInputs = function() {
    var inputs = document.getElementsByClassName('formA'),
        result = document.getElementById('total'),
        sum = 0;            
    
    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];
    
        if (ip.name && ip.name.indexOf("total") < 0) {
            sum += parseInt(ip.value) || 0;
        }
    
    }
    
    result.value = sum;
}

window.sumInputs2 = function() {
    var inputs = document.getElementsByClassName('formB'),
        result = document.getElementById('total2'),
        sum = 0;            
    
    for(var i=0; i<inputs.length; i++) {
        var ip = inputs[i];
    
        if (ip.name && ip.name.indexOf("total") < 0) {
            sum += parseInt(ip.value) || 0;
        }
    
    }
    
    result.value = sum;
}

$(document).ready(function() {
 $('.total-1').on('change', function() {
   $('.form-3').val($(this).val());
 }); 
});