JSFiddle - React, Tailwind, and code Playground

HTML

<select name="one">
    <option value="123">123</option>
    <option value="124" class="showThem">124</option>
    <option value="125">125</option>
    <option value="123">126</option>
</select>
<select name="two[0]">
    <option value="a">A</option>
    <option value="b" class="hideMe">B</option>
    <option value="c" class="hideMe">C</option>
    <option value="d">D</option>
</select>
<!-- smae option but different index -->
<select name="two[1]">
    <option value="a">A</option>
    <option value="b" class="hideMe">B</option>
    <option value="c" class="hideMe">C</option>
    <option value="d">D</option>
</select>

JavaScript

$('select[name=two[0]] option[value=b]').attr('disabled',true).hide();
$('select[name=two[0]] option[value=c]').attr('disabled',true).hide();

$('select[name=one]').change(function() {
    var showThem = $('select option:selected').hasClass('showThem');
    
    $('select[name=two[0]] option[value=b]').attr('disabled',!showThem).toggle(showThem);
    $('select[name=two[0]] option[value=c]').attr('disabled',!showThem).toggle(showThem);
    
    if(!showThem) {
        // reset, but if I submit it submits value that was last selected
        // if that value is now hidden this should not happen
        $('select[name=two[0]]').attr('selectedIndex', -1).children('option').removeAttr('selected');   
    }
});

/*
1- On the first select box, select the option 124
2- On the second seelct box, select the option B
3- Now go back to the first select box and select option 123


This does set the value in the second option selected but on submission it still submits the value B
*/