get the variable $i from counter in text

Question

I just don't know how to make this work.

I got this Javascript

$(".email").on("keyup change", function() {
if ($(this).val().match(/@gmail/i)){
$(".groupa").show();    
$(".groupb").hide();

I have a variable i from a counter

and i want it next to text from email and divs, but I'm trying and trying with no success

$(".email+i+").on("keyup change", function() {
if ($(this).val().match(/@gmail/i)){
$(".groupa+i+").show();    
$(".groupb+i+").hide();

I want it to be the email form a class="email1", class="groupa1", class="groupb1", etc.

what can I do here?

Ive tried

$(".email"+i)
$(".email"{i})
$(".email"+i+)

my complete html with css, and js

I bassicaly add rows, and then I want to filter gmail and show some options. The css is just and example I want to add more

css:

.groupa0, .groupb0, .groupa1, .groupa1, .groupa2, .groupb2, 
.groupa3, .groupb3{
 display: none;

html:

<table id="usertable">
<tr>
<td><b>User email: </b></td>
<td><b>User Options:</b></td>
</tr>
<tr>
<td><input class="form-control input-lg email0" type="email" 
 name="useremail[]" required /></td>
  <td>
<select class="form-control options" name="youchoose[]" required>
<option value=""></option>
<optgroup hidden class="groupa0" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden class="groupb0" label="Group B">
<option value="option4">option4</option>
<option value="option5">option5</option>
</optgroup>
</select>  
</td>
</tr>
</table>  

js:

<script>

 var i = 1;
 $("#addbutton").click(function () {
 $("#usertable").append('<tr>'+
 '<td><input class="form-control input-lg email'+i+'" type="email" 
 name="useremail[]" required /></td>'+
 '<td>'+
  '<select class="form-select" name="role[]" required>'+
   '<option value=""></option>'+
   '<optgroup Class="groupa'+i+'" label="Internal Roles">'+
      '    <option value="option1">option1</option>'+
      '    <option value="option2">option2</option>'+
      '    <option value="option3">option3</option>'+
      '</optgroup>'+
    '<optgroup hidden class="groupb'+i+'" label="Group B">'+
      '<option value="option4">option4</option>'+
      '<option value="option5">option5</option>'+
      '</optgroup>'+
    '</select>'+  
  '</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;
 });

 </script>

<script>
$(".email").on("keyup change", function() {
if ($(this).val().match(/@gmail)){
$(".groupa").show();    
$(".groupb").hide();
} else {
$(".groupa")).hide();
$(".groupb").show();
}
});
</script>

Answer 1

//using string concatenation
for(let i = 1; i <= 3; i++)
{
    $('.email' + i).on("keyup change", function() {
        if ($(this).val().match(/@gmail/i)){
            $('.groupa' + i).show();    
            $('.groupb' + i).hide();
        }
    });
}

//using string interpolation (Template literal)
for(let i = 1; i <= 3; i++)
{
    $(`.email${i}`).on("keyup change", function() {
        if ($(this).val().match(/@gmail/i)){
            $(`.groupa${i}`).show();    
            $(`.groupa${i}`).hide();
        }
    });
}