I have a table where you can add rows with inputs for email. When you input email I want toggle to display a hidden DIV when there is No match with a regex !email I've set.
It works, the problem is, if next input has the opposite of the match, div hides back in.
So if I add rows and input emails with @gmail I want the div to remain hidden. But if in all the rows there's any other row input with at least one email not from !@gmail I want to show hidden div and not hide it even if the next input is an input with @gmail, unless you delete all rows with !match then don't show div.
var i = 1;
$("#addbutton").click(function() {
$("#usertable").append('<tr>' +
'<td><input id="myinputs" class="form-control input-lg email1" type="email" name="mail[]" required /></td>' +
'<td><button type="button" class="removebutton" title="Remove this row">X</button></td></tr>').find("input").each(function() {});
i++;
});;
$(document).on('click', 'button.removebutton', function() {
$(this).closest('tr').remove();
return false;
});
$(document).on("keyup change", "#myinputs", function() {
$(".mydiv").toggle(!/@gmail./ig.test(this.value) && !/^\s*$/.test(this.value))
});.mydiv {
display: none;
}<form action="" method="post" enctype="multipart/form-data">
<div class="form-floating mb-3 mt-3">
<input class="btn btn-primary" type="button" id="addbutton" value="Add Row" title="Add more input rows">
<br>
<table class="thetable" id="usertable">
<tr>
<td><b>Mail: </b></td>
</tr>
<tr>
<td><input id="myinputs" class="form-control input-lg email" type="email" name="mail[]" required /></td>
</tr>
</table>
</div>
<div class="form-floating mb-3 mt-5 mydiv">
Show only if theres one email not from gmail
</div>
<div class="form-floating mb-3 mt-5">
<input class="btn btn-primary" type="submit" name="submit" value="Submit" />
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>