jquery looping through elements using $.each
by akmiecik
HTML
<div id="swim_split_grid">
<div for="split1_min" class="box"><span>Split 1</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_min" class="split" name="split1_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split1_sec" class="split" name="split1_sec" step="1" value="0" onchange="split_calc1()">
</div><input id="split1"><input value="5"id="laps1"onchange="split_calc1()">
<div for="split2_min" class="box"><span>Split 2</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_min" class="split" name="split2_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split2_sec" class="split" name="split2_sec" step="1" value="0" onchange="split_calc2()">
</div><input id="split2"><input value="5"id="laps2"onchange="split_calc2()">
<div for="split3_min" class="box"><span>Split 3</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_min" class="split" name="split3_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split3_sec" class="split" name="split3_sec" step="1" value="0" onchange="split_calc3()">
</div><input id="split3"><input value="5"id="laps3"onchange="split_calc3()">
<div for="split4_min" class="box"><span>Split 4</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_min" class="split" name="split4_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split4_sec" class="split" name="split4_sec" step="1" value="0" onchange="split_calc4()">
</div><input id="split4"><input value="5"id="laps4"onchange="split_calc4()">
<div for="split5_min" class="box"><span>Split 5</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split5_min" class="split" name="split5_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal"...
JavaScript
split_calc1 = function() {
var split = (document.getElementById("split1_min").value*60) + (document.getElementById("split1_sec").value*1);
var laps = document.getElementById("laps1").value;
var ave = split/laps;
var ave_round = (Math.round(ave * 100) / 100).toFixed(0);
var minutes = parseInt(ave_round / 60) % 60;
var seconds = ave_round % 60;
var result = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.getElementById('split1').value = result;
}
split_calc2 = function() {
var split = (document.getElementById("split2_min").value*60) + (document.getElementById("split2_sec").value*1);
var laps = document.getElementById("laps2").value;
var ave = split/laps;
var ave_round = (Math.round(ave * 100) / 100).toFixed(0);
var minutes = parseInt(ave_round / 60) % 60;
var seconds = ave_round % 60;
var result = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.getElementById('split2').value = result;
}
split_calc3 = function() {
var split = (document.getElementById("split3_min").value*60) + (document.getElementById("split3_sec").value*1);
var laps = document.getElementById("laps3").value;
var ave = split/laps;
var ave_round = (Math.round(ave * 100) / 100).toFixed(0);
var minutes = parseInt(ave_round / 60) % 60;
var seconds = ave_round % 60;
var result = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
document.getElementById('split3').value = result;
}
split_calc4 = function() {
var split = (document.getElementById("split4_min").value*60) + (document.getElementById("split4_sec").value*1);
var laps = document.getElementById("laps4").value;
var ave = split/laps;
var ave_round = (Math.round(ave * 100) / 100).toFixed(0);
var minutes = parseInt(ave_round / 60) % 60;
var seconds = ave_round % 60;
var result = (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds);
...