get the variable $i from counter in text-CodePudding

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 , , , 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  type="email" 
 name="useremail[]" required /></td>
  <td>
<select  name="youchoose[]" required>
<option value=""></option>
<optgroup hidden  label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>
<optgroup hidden  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  type="email" 
 name="useremail[]" required /></td>' 
 '<td>' 
  '<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  label="Group B">' 
      '<option value="option4">option4</option>' 
      '<option value="option5">option5</option>' 
      '</optgroup>' 
    '</select>'   
  '</td>' 
 '<td><button type="button"  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>

CodePudding user response：

//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();
    }
}