JSFiddle - React, Tailwind, and code Playground

HTML

<select id="animal">
    <option value = "" selected> Select an animal</option>
    <option value = "Dog"> Dog </option>
    <option value = "Cat"> Cat </option>
</select>
<br/>
<select id="type">
</select>

JavaScript

var AnimalTypeList = ["Dog1,Dog2,Dog3,Dog4","Cat1,Cat2,Cat3,Cat4"];

$("#animal").change(function () {
    var sel = $("#animal").prop("selectedIndex") - 1;
    var list = AnimalTypeList[sel].split(",");
    var Counter = list.length;
    //alert(Counter);
    $("#type").children().remove();
    for (var i = 0; i < Counter; i++) {
        //alert(list[i]);
        $("#type").append("<option value = '" + list[i] + "'> " + list[i] + "</option>");
        //alert(newList);
    }
    
});