JSFiddle - React, Tailwind, and code Playground

HTML

Main Activity:
<select id="filterActivity" multiple="multiple" size="10" style="width:220px;">
    <option value=""></option>
    <optgroup label="Content Creation">
        <option value="1 - Distributor/Agent" id="main1">1 - Distributor/Agent</option>
        <option value="2 - Production Company" id="main2">2 - Production Company</option>
        <optgroup label="Distribution Platforms">
            <option value="3 - TV Broadcaster" id="main3">3 - TV Broadcaster</option>
            <option value="4 - Distributor/Agent" id="main4">4 - Video Distributor</option>
</select>
<br />
<br />Sub Activity:
<select id="filterSubActivity" multiple="multiple" size="15" style="width:220px;">
    <optgroup label="1 - Distributor/Agent" id="sub1">
        <option value="1A - Sound Libraries">1A - Sound Libraries</option>
        <option value="1B - HD Digital Radio">1B - HD Digital Radio</option>
        </optgroup>
        <optgroup label="2 - Production Company" id="sub2">
            <option value="2A - Animation Graphics (CGI)">2A - Animation Graphics (CGI)</option>
            <option value="2B - Co Production">2B - Co Production</option>
            <option value="2C - Sub Production">2C - Sub Production</option>
            </optgroup>
            <optgroup label="3 - TV Broadcaster" id="sub3">
                <option value="3A - Antennas Transmitter">3A - Antennas Transmitter</option>
                <option value="3B - Cable and Satellite">3B - Cable and Satellite</option>
                </optgroup>
</select>

JavaScript

$(document).ready(function () {
    $("#filterActivity").change(function () {
        $("#filterSubActivity").children("optgroup").children().prop("disabled", "disabled").prop("selected", false);
        var arr = $(this).val();

        //get options that are not selected
        var arr1 = $('#filterActivity option:not(:selected)');
        //get the ones that are selected
        var arr2 = $('#filterActivity').find(":selected");

        for (var i = 0; i < arr.length; i++) {
            $("#filterSubActivity").children("optgroup[label='" + arr[i] + "']").children().prop("disabled", false).prop("selected", "selected").show();
        }

        //hide optgroups in subactivity
        for (var j = 0; j < arr1.length; j++) {
            $("#filterSubActivity").children("optgroup[label='" + arr1[j].value + "']").hide();
        }

        //show the ones that are selected
        for (var k = 0; k < arr2.length; k++) {
            $("#filterSubActivity").children("optgroup[label='" + arr2[k].value + "']").show();
        }

        $("#filterSubActivity").focus();
    });
});