JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<div>
<select id="a" multiple="multiple">
    <option value="118732">Sharon North</option>
    <option value="226542">Anna Nur</option>
    <option value="333982">Bob Roberts</option>
    <option value="423982">Andrew Kentford</option>
</select><br/>
<button id="move" onclick="move('a','b','b')">Move V</button>&nbsp;
<button id="move" onclick="move('b','a','b')">Move ^</button><br/>
<select id="b" multiple="multiple"></select><br/>
<br/>
<input id="ownerslist" type="text" />
</div>

CSS

div {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

select, input[type=text] {
    height: 120px;
    width: 350px;
    border: 1px solid #66f;
    border-radius: 10px;
    padding: 5px;
    margin: 5px;
}

JavaScript

function move(fromID, toID, addUsingID) {
    var selFrom = document.getElementById(fromID),
        selTo = document.getElementById(toID);

    // Extract the elements into an array
    for (var i = selFrom.options.length - 1; i >= 0; i--) {
        if (selFrom.options[i].selected) {
            var optionMoved = (selFrom.removeChild(selFrom.options[i]));
            selTo.options.add(optionMoved);
        }
    }
    
    sOReorderSelect(toID);
    updateOwnerList(addUsingID, 'ownerslist');
}

function sOReorderSelect(selectID)
{
    var oSelect = document.getElementById(selectID),
        aOpts = [];

    // Extract the elements into an array
    for (var i = oSelect.options.length - 1; i >= 0; i--) {
        aOpts.push(oSelect.removeChild(oSelect.options[i]));
    }

    // Sort them
    aOpts.sort(function (a, b) {
        return a.innerHTML.localeCompare(b.innerHTML);
    });

    // Put them back into the <select>
    while (aOpts.length) {
        oSelect.appendChild(aOpts.shift());
    }
}

function updateOwnerList(useSelectID, ownersList) {
    var oSelect = document.getElementById(useSelectID),
        oInput = document.getElementById(ownersList),
        aOwners = [],
        sOwners = '';
   
    oOwners = oSelect.cloneNode(true);
    
    while (oOwners.options.length) {
        console.log(oOwners.options[0].value);
        sOwners = sOwners + '_' + oOwners.options[0].value;
        oOwners.options.remove(0);
    }

    oInput.value = sOwners.substring(1);
}