JSFiddle - React, Tailwind, and code Playground

HTML

<select id="first">
    <option class="one">first-one</option>
    <option class="two">first-two</option>
    <option class="three">first-three</option>
    <option class="four">first-four</option>
</select>

<select id="second" disabled="disabled">
</select>

JavaScript

var globaloptions = {
    one: [
        "one-one",
        "one-two",
        "one-three"   
    ],
    two: [
        "two-one",
        "two-two",
        "two-three"   
    ],
    three: [
        "three-one",
        "three-two",
        "three-three"   
    ],
    four: [
        "four-one",
        "four-two",
        "four-three"   
    ]    
    
};
$(document).ready(function(){
    $("#first").change(function(){
        var selectedClass = $(this).find("option:selected").attr("class");    
        var options = globaloptions[selectedClass];
        var newoptions = "";
        for(var i = 0; i < options.length; i++){
            newoptions+="<option>"+ options[i] +"</option>";
        }
        $("#second").html(newoptions).removeAttr("disabled");
    });        
});