JSFiddle - React, Tailwind, and code Playground

HTML

<select class="group-1" name="categories">
  <option value="" selected="selected">Please select...</option>
  <option value="cookie">Cookies</option>
  <option value="cake">Cakes</option>
  <option value="icecream">Ice Cream</option>
</select>

<select class="group-1 hide" name="desserts" data-parent="categories">
  <option value="" selected="selected">Desserts...</option>
  <option value="1-dozen" data-parent="cookie">1 dozen</option>
  <option value="2-dozen" data-parent="cookie">2 dozen</option>
  <option value="sheet" data-parent="cake">Sheet</option>
  <option value="round" data-parent="cake">Round</option>>
  <option value="pint" data-parent="icecream">Pint</option>
</select>

<select class="group-1 hide" name="flavors" data-parent="desserts">
  <option value="" selected="selected">Flavors...</option>
  <option value="choc-chip" data-parent="1-dozen 2-dozen">Chocolate Chip</option>
  <option value="oatmeal" data-parent="1-dozen 2-dozen">Oatmeal</option>
  <option value="yellow" data-parent="sheet round">Yellow</option>
  <option value="red-velvet" data-parent="sheet">Red Velvet</option>
</select>

JavaScript

$(document).ready(function(){
		$(".hide").children("option").hide();
		//$(".hide").find("option:not(:selected)").hide();
    $("select").on('change', function(){
    		var selClass = $(this).attr("class");
    		var selName = $(this).attr("name");
        var selVal = $(this).children("option:selected").val();
        $("select."+selClass+"[data-parent='"+selName+"']").each(function(){
        	$(this).children("option[data-parent='"+selVal+"']").show();
        	$(this).children("option[data-parent!='"+selVal+"']").hide();
        });
		});
});