JSFiddle - React, Tailwind, and code Playground

by Slico

HTML

<div>
    <h1>First pair</h1>
<select class="selectoption" name='wf_events[]'>
    <option value=''>1 select</option>
    <option value=''>item</option>
    <option value=''>item</option>
    <option value=''>item</option>
    <option value=''>item</option>
    <option value=''>item</option>

</select>
<select class="selectoption" name='wf_events[]'>
    <option value=''>2 select</option>
    <option value=''>item 1</option>
    <option value=''>item 1</option>
    <option value=''>item 1</option>
    <option value=''>item 1</option>
    <option value=''>item 1</option>
</select>
</div>
<div>
    <h1>Second pair</h1>
<select class="selectoption" name='wf_events[]'>
    <option value=''>3 select</option>
    <option value=''>item 2</option>
    <option value=''>item 2</option>
    <option value=''>item 2</option>
    <option value=''>item 2</option>
    <option value=''>item 2</option>
</select>

<select class="selectoption" name='wf_events[]'>
    <option value=''>4 select</option>
    <option value=''>item 3</option>
    <option value=''>item 3</option>
    <option value=''>item 3</option>
    <option value=''>item 3</option>
    <option value=''>item 3</option>
</select>
</div>

JavaScript

// option 1
/*$(".selectoption").on("change", function(event){
    $(".selectoption").attr("disabled", true);
    $(event.target).attr("disabled", false);
    $(event.target).next().attr("disabled", false);
    $(event.target).prev().attr("disabled", false);
});*/

// option 2
/*$(".selectoption").on("change", function(event){
    $(".selectoption").parent().hide();
    $(event.target).parent().show();
});*/

$(".selectoption").on("change", function(event){
    $(event.target).attr("disabled", false);
    $(event.target).next().attr("disabled", true);
    $(event.target).prev().attr("disabled", true);
});