JSFiddle - React, Tailwind, and code Playground
HTML
<select id="userVal">
<option value="012">Primary</option>
<option value="345">Secondary</option>
<option value="678">Tertiary</option>
</select>
<button id="calculate">Calculate</button>
<br />Primary:
<input type="text" name="resource_012_1" />
<br />Primary:
<input type="text" name="resource_012_2" />
<br />Secondary:
<input type="text" name="resource_345_1" />
<br />Secondary:
<input type="text" name="resource_345_2" />
<br />Tertiary:
<input type="text" name="resource_678_1" />
<br />Tertiary:
<input type="text" name="resource_678_2" />
<br />Total: <span id="total"></span>
JavaScript
jQuery(function ($) {
var userVal = $('#userVal'),
calculateBtn = $('#calculate'),
total = $('#total');
calculateBtn.on('click', function (evt) {
evt.preventDefault();
//var samp = $(thisVal).attr('name'); //user defined name
var samp = userVal.val(),
tot = 0,
inputs = $('input[name^="resource_' + samp + '_"]');
inputs.each(function () {
var v = $(this).val();
if (v === '') {
v = 0;
}
tot += parseInt(v);
});
total.text(tot);
});
});