JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>Category</td>
        <td>Items of Category</td>
        <td></td>
        <td>Selected Items</td>
    </tr>
    <tr>
        <td>
            <div>
                <select name="drop1" id="SelectBox" size="4" style="width:100%;height : 200px"></select>
            </div>
        </td>
        <td>
            <select name="drop1" id="SelectBox2" size="4" multiple="multiple" style="width:100%;height : 200px"></select>
        </td>
        <td>
            <input type="button" id="add" value=">>" style="display:block;" />
            <input type="button" id="remove" value="<<" style="display:block;" />
        </td>
        <td>
            <select id="SelectedItems" size="4" multiple="multiple" style="width:100%;height : 200px"></select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="Select All" id="selectAll" style="display:block; width:90px" />
            <input type="button" value="Deselect All" id="deselectAll" style="display:block; width:90px" />
        </td>
        <td></td>
        <td>
            <input type="button" value="Select All" id="selectAll1" style="display:block; width:90px;" />
            <input type="button" value="Deselect All" id="deselectAll1" style="display:block; width:90px" />
        </td>
    </tr>
</table>
<input type="hidden" id="hidden1" />
<p id="selectedValues"></p>

CSS

div {
    display: inline;
    height: 200px;
}
body {
    font:0.9em Verdana;
}
td, tr {
    padding:0px 5px 0px 5px;
}

JavaScript

$(function () {
    var items = [{
        category: "Art",
        val: CreateGuid(),
        text: "Art Item 1",
        display: true
    }, {
        category: "Art",
        val: CreateGuid(),
        text: "Art Item 2",
        display: true
    }, {
        category: "Video",
        val: CreateGuid(),
        text: "Video Item 1",
        display: true
    }, {
        category: "Video",
        val: CreateGuid(),
        text: "Video Item 2",
        display: true
    }];

    var categories = ["Art", "Video"];

    function PopulateSelectBox() {
        var innHTML = "";

        for (var i = 0; i < categories.length; i++) {
            innHTML += '<option val="' + categories[i] + '">' + categories[i] + '</option>';
        }

        $('#SelectBox').append(innHTML);
        
        $('#SelectBox option:first-child').attr("selected", "selected");
        
        // update the items of category list box
        $('#SelectBox').trigger('change');
    }
    

    function PopulateSelectedListBox() {
        var innHTML = "";

        for (var i = 0; i < items.length; i++) {
            if (items[i].display == false) {
                innHTML += '<option value="' + items[i].val + '" data-key="' + items[i].category + '">' + items[i].text + '</option>';
            }
        }

        $('#SelectedItems').empty().append(innHTML);
    };

    $('#SelectBox').change(function () {
        var cat = $('#SelectBox option:selected').val();
        var innHTML = "";
        for (var i = 0; i < items.length; i++) {
            if (items[i].category == cat && items[i].display == true) {
                innHTML += '<option value="' + items[i].val + '" data-key="' + cat + '">' + items[i].text + '</option>';
            }
        }

        $('#SelectBox2').empty().append(innHTML);
    });

    $('#add').click(function () {
        $("#SelectBox2 option:selected").each(function () {
            var optionVal = $(this).val();

            for (var i = 0; i <...