JSFiddle - React, Tailwind, and code Playground

by wZVanG

HTML

<form name="banks_deposits">
	<table>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
		<tr> <td><select name="banco[]"></select></td> <td><input type="text" name="deposito[]" value="0" /></td> </tr>
	</table>
	<pre id="result"></pre>
</form>

JavaScript

var banks = {"~": 0, "Bajio": 0, "Banamex": 0, "Banco Azteca": 0, "Banco Walmart": 0, "Banorte": 0,
 "Banregio": 0, "BBVA Bancomer": 0, "Coppel": 0, "HSBC": 0, "Inbursa": 0, "IXE": 0, "Mifel": 0, "Santander": 0, "Scotiabank": 0};
var form = document.forms.banks_deposits;
var selects = form["banco[]"];
var deposit_fields = form["deposito[]"];

//muestra resultado
var result = function(){
	var html_result = [];
	for(var j in banks) html_result.push(j == '~' ? '' : j + ' : ' + banks[j]);
	document.getElementById("result").innerHTML = "Totales: <br />" + html_result.join("<br />");
}

//actualizar cantidad de cada banco, sumar los valores de cada campo
var update = function(){
	for(var j in banks){
		var x = 0, field;
		banks[j] = 0;
		
		while(field = deposit_fields[x])
			if(selects[x++].value == j) banks[j] += +field.value;
	}
	result()
};

//armamos todo, recorremos todos los campos
for(var i=0; i < deposit_fields.length; i++){
	
	//crea la lista de bancos para cada campo, asi mantenemos ordenado y evitamos el exceso de código HTML
	var optionsHTML = '';
	for(var j in banks) optionsHTML += '<option value="'+j+'">'+j+'</option>';
	selects[i].innerHTML = optionsHTML
	////
	
	//eventos para actualizar el total por cada cambio de banco o valor de depósito
	selects[i].onchange = update
	deposit_fields[i].onkeyup = update
	deposit_fields[i].onchange = update
	////
}

//TU EJEMPLO
var z = 0;
selects[z].value = "Banamex"; deposit_fields[z++].value = 50;
selects[z].value = "BBVA Bancomer"; deposit_fields[z++].value = 100;
selects[z].value = "HSBC"; deposit_fields[z++].value = 300;
selects[z].value = "Banamex"; deposit_fields[z++].value = 30;
selects[z].value = "BBVA Bancomer"; deposit_fields[z++].value = 80;
selects[z].value = "HSBC"; deposit_fields[z++].value = 10;

//RESULTADO EJEMPLO
update()