JSFiddle - React, Tailwind, and code Playground

HTML

<div id="share_inclusions_select" class="checkbox_response">
    <ul class="share_types_custom_select">
        <li class="li_unselected">type 1</li>
        <li class="li_unselected">type 2</li>
        <li class="li_unselected">type 3</li>
        <li class="li_unselected">type 4</li>
        <li class="li_unselected">type 5</li>
        <li class="li_unselected">type 6</li>
        <li class="li_unselected">type 7</li>
        <li class="li_unselected">type 8</li>
        <li class="li_unselected">type 9</li>
        <li class="li_unselected">type 10</li>
        <li class="li_unselected">type 11</li>
        <li class="li_unselected">type 12</li>
    </ul>
    <ul class="share_types_selections_custom_select" id="share_types_inclusions"></ul>
</div>

CSS

*[class$="_custom_select"] {
    border:solid;
    border-width: 1px;
    height:350px;
    overflow:auto;
    padding-left: 0px;
    padding-right: 5px;
    display:inline-block;
    list-style-type: none;
}
.li_disabled {
    color:#2F4F4F;
    font-weight: bold;
    cursor: not-allowed;
}
.li_selected {
    background-color:#E997AF;
    cursor: pointer;
}
.li_unselected {
    color:#000000;
    cursor: pointer;
}
.li_selected_2 {
    background-color:#90EE90;
    cursor: pointer;
}

JavaScript

$('[class$="_custom_select"] li').mousedown(function (event) {
    console.log('hi');
    var opt = event.target;
    if (opt.className != 'li_disabled' && event.which == 1) {
        if (opt.className == 'li_unselected') {
            opt.className = 'li_selected';
        } else {
            opt.className = 'li_unselected';
        }
        update_selections(opt.parentElement);
    }
});

$('[class*="selections"]').mousedown(function (event) {
    var opt = event.target;
    if (event.which == 1) {
        if (opt.className == 'li_unselected') {
            opt.className = 'li_selected_2';
        } else {
            opt.className = 'li_unselected';
        }
    }
});


function update_selections(ul) {
    //find the target element (list of selected items)
    var id = ul.className.replace('_custom_select', ''); //e.g. share_types_custom_select  << remove custom_select
    var append = ul.parentElement.id.split('_')[1]; //e.g. share_exclusions_select  << grab "exclusions"
    id = id + '_' + append; //e.g share_types_exclusions
    var target_element = document.getElementById(id);

    outdated_selections = target_element.children;
    var all_options = ul.children;

    //clear the outdated version of the list
    for (var i = 0; i < outdated_selections.length; i++) {
        target_element.removeChild(outdated_selections[i]);
        i -= 1;
    }

    //fill in the list with up to date entries
    for (var i = 0; i < all_options.length; i++) {
        if (all_options[i].className == "li_selected") {
            var li = all_options[i].cloneNode(true);
            li.className = "li_unselected";
            target_element.appendChild(li);
        }
    }
}