JSFiddle - React, Tailwind, and code Playground

HTML

<select id="category" name="category">
    <option value="0">-- All Categories --</option>
    <option value="one">category one</option>
    <option value="two">category two</option>
</select>
<select id="subcategory" name="subcategory">
    <option value="0">-- All Sub Categories --</option>
</select>

JavaScript

$('#category').on("change",function(){
    var cat = $(this).val();
    var subCat = "";
    switch (cat) { 
        case "one":
        subCat = '<option value="sub1">Sub Category One</option>';
        break;
        case "two":
        subCat = '<option value="sub2">Sub Category Two</option>';
        break;
    }
	setCookie('select', cat);
    $("#subcategory").html(subCat);
})

var sel = getCookie('select');
if(sel){
	$('#category').val(sel).trigger('change');
}


//Cookie functions for setting and retrieving, the duration I set is 24hrs only.
function setCookie(key, value) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
    document.cookie = key+'='+value+';expires='+expires.toUTCString();
}

function getCookie(key) {
    var key = document.cookie.match('(^|;) ?'+key+'=([^;]*)(;|$)');
    return key ? key[2] : null;
}