JSFiddle - React, Tailwind, and code Playground

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">
</div>
<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">
</div>
<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">
</div>
<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">
</div>
<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" id="split5_sec" class="split" name="split5_sec" step="1" value="0">
</div>
<div for="split6_min" class="box"><span>Split 6</span><br>
<input pattern="[0-9]*" type="number" inputmode="decimal" id="split6_min" class="split" name="split6_min" step="1" value="5"><span>:</span><input pattern="[0-9]*" type="number" inputmode="decimal" id="split6_sec" class="split" name="split6_sec" step="1"...

CSS

.name{
  font-size: 16px;
  font-weight: lighter;
  line-height: 26px;
}

JavaScript

var namesList = document.getElementsByClassName('split');
var names = []; 
for (var i = 0; i < 7; i++) {
var result = namesList[i].val();
names.push(result.trim());
}

var nameString = names.join(', ');
alert(nameString);