JSFiddle - React, Tailwind, and code Playground

HTML

<select name="cat" class="first">
	<option value="">----------Select Category--------</option>
	<option class="finance" value="Finance">Finance</option>
	<option class="travel" value="Travel">Travel</option></select>

	<!--basing on the option selected in HTML code I would like to display Options in the below select-->
	<select name="scat" class="second">
	<option value="">---------Select subcategory------</option>
	<option class="finance" value="Financial Planning">Financial Planning</option>
	<option class="finance" value="Financial Control">Financial Control</option>
	<option class="finance" value="Corporate Finance">Corporate Finance</option>
	<option class="finance" value="Financial Management">Financial Management</option>
	<option class="finance" value="Financial Statement">Financial Statement</option>
	<option class="travel" value="Travel Planning">Travel Planning</option>      
	<option class="travel" value="Travel Management">Travel Management </option>
	<option class="travel" value="Corporate Travel">Corporate Travel</option>
	</select><br>

JavaScript

$(document).ready(function(){
	$('select.first').change(function(){
	    var sel = $('select.first option').map(function(){
	        return $(this).attr('class');
        });

        for (i = 0; i < sel.length; i++) {
            if ($('select.first option:selected').hasClass(sel[i])) {
                $('select.second option').not('select.second option:first-child, .' + sel[i]).prop('disabled', true);
                $('select.second option.' + sel[i]).prop('disabled', false);
			 }
		}
    });
});