Show options from select when match

I’m struggling to show some options when u type a match and others if you don’t. I'm new in coding in general.

I just cant make it work how I want.

test html:

<input class="form-control input-lg email" type="email" 
name="useremail[]" required />

<select class="form-control" name="youchoose[]" required>
<option value=""></option>

<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>

<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>

<br><br>
<hr>
<br>

<input class="form-control input-lg email" type="email" 
name="useremail[]" required />

<select class="form-control" name="youchoose[]" required>
<option value=""></option>
<optgroup class="groupa" label="Group A">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</optgroup>

<optgroup class="groupb" label="Group B">
<option value="option4">option4</option>
<option value="option4">option5</option>
</optgroup></select>

the js:

$('.email').on("input", function(){
$("optgroup.groupa").toggle(/hotmail/ig.test(this.value) )
var _this = $(this);
if ( _this.val() == 0 )
    $('optgroup.groupa').show();
else {
    $('optgroup.groupb').hide();
    $('optgroup.' + _this.val()).show();
}
});

How is this working? I'm to noob.
How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.
How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.

Thanks

Solution

How can I avoid when you input in input1, input2 changes also? I’m going to have lots of inputs since I add them dynamically and you can have 1 row or tons of rows.

Your code didn't produce this issue, but both of your inputs are identical which is likely related to your question here. Give your second input different attributes to distinguish it from the first.

<input class="input2" type="text" name="input2" required />

How do I keep select hidden until match/or not match is inputted? I don’t want to show options since u can pick them before you input something in the box.

The solution below should provide the logic you need. It's a pretty odd use case, but you're describing displaying or toggling a group of options based on matching user input.

jQuery .on() is an event handler. Get the user input by accessing event.target.value inside the handler and conditionally show or hide what you need.

Run the below code and type "Group A" into the input. Then, you'll see the options for group A appear in the select list. When the input no longer matches, those options are hidden again. I've checked the user input against the group label here to illustrate. You can adjust the logic and what elements to target as needed.

<input
  class="form-control input-lg email"
  type="email"
  name="useremail[]"
  required
/>

<select class="form-control options" name="youchoose[]" required>
  <option value=""></option>
  <optgroup hidden class="groupa" label="Group A">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
  </optgroup>

  <optgroup hidden class="groupb" label="Group B">
    <option value="option4">option4</option>
    <option value="option4">option5</option>
  </optgroup>
</select>

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"
></script>
<script>
  $('.email').on('input', function (event) {
    $('optgroup').each(function () {
      console.log(event.target.value);
      if (this.label === event.target.value) {
        console.log('match');
        $(this).removeAttr('hidden');
      } else {
        $(this).attr('hidden', true);
      }
    });
  });
</script>