JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input-left">
    <input class="textbox" id="left1" name="count1[]" type="text" size="5" value="5" />
</div>
<div class="input-right">
    <input class="textbox" id="right1" name="count2[]" type="text" size="5" value="6" />
</div>
<div class="input-left">
    <input class="textbox" id="left2" name="count1[]" type="text" size="5" value="" />
</div>
<div class="input-right">
    <input class="textbox" id="right2" name="count2[]" type="text" size="5" value="" />
</div>
<div id="result"></div>
<div class="input-left">
    <input class="textbox" id="left3" name="count1[]" type="text" size="5" value="" />
</div>
<div class="input-right">
    <input class="textbox" id="right3" name="count2[]" type="text" size="5" value="" />
</div>
<div id="result1"></div>
<hr>
<div id="result2"></div>

CSS

.input-left {
     float:left;
 }
 .input-right {
     margin-left:100px;
 }

JavaScript

// not quite right, will fix up later
function sumIt1() {

    var result = document.getElementById("result1");

    var boxesLeft = document.getElementsByName('count1[]');
    var boxesRight = document.getElementsByName('count2[]');

    var total = 0;
    for (i = 0; i < boxesLeft.length; i++) {
        total = total + myClean(boxesLeft.item(i).value);
        total = total + myClean(boxesRight.item(i).value);
    }
    console.log(total)
    result.innerHTML = "" + total;
}

function sumIt2() {
    var result = document.getElementById("result2");
    var boxes = document.getElementsByClassName('textbox');

    var total = 0;
    for (i = 0; i < boxes.length; i++) {
        total = total + myClean(boxes.item(i).value);
    }
    console.log(total);
    result.innerHTML = "" + total;
}

function myClean(val) {
    var output = parseFloat(val) || 0;
    return output;
}

sumIt1();
sumIt2();

var input = document.getElementsByTagName('input');

input.onBlur = function () {
    console.log('onBlur');
    sumIt1();
    sumIt2();
}