JSFiddle - React, Tailwind, and code Playground

HTML

a: <input type="text" id="a" value="" />
<br>
b: <input type="text" id="b" value="" />
<br>
c: <input type="text" id="c" value="" />
<br>
d: <input type="text" id="d" value="" />
<br><br>
<button type="button" id="reset">Reset</button>

JavaScript

var inputs = document.querySelectorAll("input");
var btnReset = document.querySelector("#reset");

btnReset.addEventListener('click', onBtnResetClick);

// register on key ups
for (var i = 0; i < inputs.length; i++) {
	// click calls weenisFunction
    inputs[i].addEventListener("keyup", onInputKeyUp);
}

// add reset
function onBtnResetClick(ev) {
	for (var i = 0; i < inputs.length; i++) {
    	inputs[i].value = "";
	}	
}

function onInputKeyUp(ev) {
    var _el = ev.target; 
    var sum = 0;
    var valuesFilled = [];
    for (var input in inputs) {
        var currentEl = inputs[input];
        var currentValue = parseInt(currentEl.value,10) || 0;
        sum += currentValue;
        if (currentValue > 0) {
            valuesFilled.push([currentEl, currentValue]);
        }
  		if (inputs[input] == _el) {
        	//console.log("its me");
        }
	}

    for (var arrField in valuesFilled) {
        var arrField = valuesFilled[arrField];       
    	if (valuesFilled.length >= 3) {
            // get 
            var emptyField = getFirstEmptyField();
            console.log("emptyField", emptyField);
            if (emptyField !== false) {
                emptyField.value = "Sum:" + sum;
                break;
                return false;
            } else {
            	alert("empty another box first");
                return false;
            }
        }
    }
    
}

function getFirstEmptyField() {
    var out = false;
	for (var input in inputs) {
        var _input = inputs[input];
        //console.log("check emptyfield", _input.value);
        if (_input.value === "") {
           out = _input;
        }
    }
    return out;
}