JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<form>
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
<input type="number" name="" id="" value = "" class="x">
</form>

</body>

CSS

.x{
		background: lightblue;
	}
	.y{
		background: red;

	}

JavaScript

var dados = [...document.getElementsByClassName('x')];
console.log("Dados in array:", dados);

dados.forEach(dado => {
	console.log("Dado->:", dado);
  console.log("Dado->:", dado.className);
	dado.addEventListener('blur',function(e){
		console.log("BLUR");
    var classe = dado.value ? 'x' : 'y';
		dado.className = classe; 
		console.log("BOBBA");
	});
});