JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<form action="" method="post" name="form" id="form">
<table style="width: 70%" id="Table" name="Table">
<tr>
<th>Time</th>
</tr>
<tr>
<td>
<p class="null_temp">
<input type="text" name="temp1" id="temp1" placeholder="Time" size="10" maxlength="8" value="" class="total_time_regex" onsubmit="myFunction()" />
</p>
</td>
</tr>
</table>
<input type="button" id="btnAdd" name="btnAdd" value="Add More" class="button" />
<button type="submit" id="signup" value="Sign me up!">Sign Up</button>
</form>
<script>
function myFunction() {
var x = document.getElementsByClassName("total_time_regex");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}
</script>
CSS
#Table {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse:collapse;
}
#Table td, #Table th {
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
#Table th {
font-size:1.4em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#fff;
}
#Table tr.alt td {
color:#000;
background-color:#EAF2D3;
}
JavaScript
var count_2 = 5;
$(document).ready(function () {
$('#btnAdd').click(function () {
count_2 = count_2 + 2;
$('#Table tr:last').after('<tr><td>' +
'<p class=\"null_temp\">' +
'<input type=\"text\" name=\"temp' + count_2 + '\" id=\"temp' + count_2 + '\" placeholder=\"Time\" size=\"10\" maxlength=\"8\" value=\"\" class=\"total_time_regex\" onblur=\"myFunction()\" />' +
'</td></tr>');
$('.total_time_regex').inputmask('Regex', {
regex: "^([-][0-9]{1,4}[.][0-5][0-9])|([0-9]{1,4}[.][0-5][0-9])$"
});
});
});
$('.total_time_regex').inputmask('Regex', {
regex: "^([-][0-9]{1,4}[.][0-5][0-9])|([0-9]{1,4}[.][0-5][0-9])$"
});