how to change a selections options based on another select option selected (Array)?

I have 2 select options fetched in foreach as many as my records goes. I want to change the drop down options in second select options based on what I select in first select options.

<select id="main[{{$user->id}}]">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
<select>

select option if A is selected from first select option

<select id='sub[{{$user->id}}]'>
   <option value="1">1</option>
   <option value="2">2</option>
</select>

I tried the normal method but it works for just the first select

$('#main').change(function() {
    var options = '';
    if($(this).val() == 'a') {
        options = '<option value="1">1</option>';
    }
    else if ($(this).val() == 'b'){
        options = '<option value="2">2</option>';
    }
$('#sub').html(options);

});

#jquery #laravel