JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            <select id="mySelect1" size="5" multiple style="width:200px">
                <option value="opt1">Option 1</option>
                <option value="opt2">Option 2</option>
                <option value="opt3">Option 3</option>
            </select>
        </td>
        <td valign="center">
            <button id="toRight">►</button><br/>
            <button id="toLeft">◄</button>
        </td>
        <td>
            <select id="mySelect2" size="5" multiple style="width:200px">
                <option value="opt4">Option 4</option>
                <option value="opt5">Option 5</option>
                <option value="opt6">Option 6</option>
            </select>
        </td>
    </tr>
</table>

JavaScript

function moveOptionsTo(index) {
    $('#mySelect' + (3-index) 
      + ' option:selected').appendTo('#mySelect' + index);
}
$('#toRight').click(function() {
    moveOptionsTo(2);
});
$('#toLeft').click(function() {
    moveOptionsTo(1);
});
$('#mySelect1').dblclick(function() {
    moveOptionsTo(2);
});
$('#mySelect2').dblclick(function() {
    moveOptionsTo(1);
});