JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <select name="drop1" id="SelectBox" size="4" style="width:100px;height : 200px">
        <option value="art">Art</option>
        <option value="video">Video</option>
    </select>
</div>
<select name="drop1" id="SelectBox2" size="4" multiple="multiple" style="width:100px;height : 200px">
    <option value="1">item 1</option>
    <option value="2">item 2</option>
    <option value="3">item 3</option>
    <option value="4">item 4</option>
    <option value="0">All</option>
</select>
<input type="button" id="add" value="Add" />
<input type="button" id="remove" value="Remove" />
<select id="SelectedItems" size="4" multiple="multiple" style="width:100px;height : 200px"></select>
<input type="hidden" id="hidden1" />
<p id="selectedValues"></p>

CSS

div {
    display: inline;
    height: 200px;
}

JavaScript

$(function () {
    var artItems = ["Art 1", "Art 2", "Art 3", "Art 4", "Art 5", "Art 6"];
    var vidItems = ["Video 1", "Video 2", "Video 3", "Video 4", "Video 5", "Video 6"];
    $('#SelectBox').change(function () {
        var str = "",
            inHTML = "",
            items;
        items = $(this).val() == 'art' ? artItems : vidItems;
        $.each(items, function (i, ob) {
            inHTML += '<option value="' + i + '">' + ob + '</option>';
        });
        $("#SelectBox2").empty().append(inHTML);
    });

    $('#SelectBox2').change(function () {
        $("#selectedValues").text($(this).val() + ';' + $("#SelectBox").val());
        $('#hidden1').val($(this).val());
    });

    $('#add').click(function () {
        inHTML = "";
        $("#SelectBox2 option:selected").each(function () {
            inHTML += '<option value="' + $(this).val() + '">' + $(this).text() + '</option>';
        });
        $("#SelectedItems").append(inHTML);
    });
});