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>
<br><br>
<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>

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;
// displays latte type dropdown menu if latte is selected

var showLatte = function() {
    var latteFlavors = $("latteFlavors");
    var coffee = $("coffeeType").value;
    
    if (coffee == "Latte") { 
            latteFlavors.setAttribute("class", "showLatteFlavors");
    } else {
            latteFlavors.removeAttribute("class"); 
    }
};
    
window.onload = function() {
    init(); // calls function  
}