JSFiddle - React, Tailwind, and code Playground

HTML

<select name="coffeeType" id="coffeeType">
        <option value="#">Select Coffee</option>
        <option value="Hazelnut">Hazelnut</option>
        <option value="Decaf">Decaf</option>
        <option value="Reg">Regular</option>
        <option value="Americano">Americano</option>
        <option value="Latte">Latte</option>
</select>

<select name="latteFlavors" id="latteFlavors">
        <option value="#">Select Latte</option>
        <option value="mocha">Mocha</option>
        <option value="chai">Chai</option>
        <option value="pumpkin">Pumpkin</option>
        <option value="macchiato">Macchiato</option>
</select>
    
<div id ="latteFlavors"></div>

CSS

#latteFlavors.showLatteFlavors {
    display: block;
}    
#latteFlavors {
    display: none;
}

JavaScript

var $ = function(id) {
  return document.getElementById(id);
  }; 
    
function init() { 
    var allSelect = document.getElementsByTagName("select");
	// onchange event for all selects coffeeType, coffeeSize, latteType
	   for (var i = 0; i < allSelect.length; i++)
	   {
		allSelect[i].onchange = showLatte(); // calls function
		
	   }
}

var coffee = $("coffeeType").value;
    
function showLatte() {
    var latteFlavors = $("latteFlavors");
    // create dropdown menu
    var latteList = document.createElement("select");
    latteList.appendChild(new Option("mocha")); 
    latteList.appendChild(new Option("chai"));
    latteList.appendChild(new Option("pumpkin"));
    latteList.appendChild(new Option("macchiato"));
    latteFlavors.appendChild(latteList); // adds dropdown menu to latteFlavors div id
 
    
    switch(coffee) { 
        case "Latte":
           if (latteFlavors.hasAttribute("class")) { 
               latteFlavors.removeAttribute("class");
           } else {
               latteFlavors.setAttribute("class", "showLatteFlavors");
           }
            break;
        default:
            if (latteFlavors.hasAttribute("class")) { 
                latteFlavors.removeAttribute("class");
            }
            break;
    }
};


window.onload = function() {
    init(); // calls function
    var latteFlavors = $("latteFlavors"); 
}