JSFiddle - React, Tailwind, and code Playground

HTML

<select class="fancy-select" id="s-1" name = "firstoption">
        <option value = "">default option</option>
        <option value = "1">1</option>
    </select>
    
    <select class="fancy-select" id="s-2" name = "secondoption">
        <option value = "">default option</option>
        <option value = "2">2</option>
    </select>
    
    <select class="fancy-select" id="s-3" name = "thirdoption">
        <option value = "">default option</option>
        <option value = "3">3</option>
    </select>
    
    <select class="fancy-select" id="s-4" name = "fourthoption">
        <option value = "">default option</option>
        <option value = "4">4</option>
    </select>
<script type="text/javascript">
    function myHandler() {
    		if (!this.value) {
    		    var currentID = parseInt(this.id.substring(2));
		        for (let i = currentID; i < fancySelects.length; i++) fancySelects[i].value = "";
        }
    }
    var fancySelects = document.querySelectorAll(".fancy-select");
    for (let item of fancySelects) item.addEventListener("change", myHandler);
</script>