JSFiddle - React, Tailwind, and code Playground

HTML

<select id="first" data-child="#second">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
<option value="4">four</option>
<option value="5">five</option>
<option value="6">six</option>
<option value="7">seven</option>
</select>

<select id="second" data-child="#third">
</select>

<select id="third">
</select>

JavaScript

$(document).ready(init);

function mapItems(index, elem){
    var items = [];
    items.push({value:$(elem).val(), text:$(elem).text()});    
    return items;
}

function replaceItems(items, appendTo){
    appendTo.empty();
    for(var i in items){
        var item = items[i];
        if(item.value && item.text){
            appendTo.append("<option value='"+item.value+"'>"+item.text+"</option");
        }
    }
}

function selected(e){        
    var items = $(this).find("option:not(:selected)").map(mapItems);
    var child = $($(this).attr("data-child"));
    replaceItems(items, child);
    child.change();
}

function init(){
    var first = $("select#first");    
    var second = $("select#second");    
    var third = $("select#third");
    first.change(selected);
    second.change(selected);
    first.trigger('change');
}