JSFiddle - React, Tailwind, and code Playground

by azhari

HTML

<select name="select1" multiple="multiple" id="SelectLeft">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
 </select>
<input id="MoveRight" type="button" value=" >> "/>
<input id="MoveLeft" type="button" value=" << " />
<select name="select2" multiple="multiple" id="SelectRight">
 </select>

CSS

select {
    width:150px;
    height:100px;
}

JavaScript

$("#MoveRight,#MoveLeft").click(function (event) {
            var id = $(event.target).attr("id");
            var selectFrom = id == "MoveRight" ? "#SelectLeft" : "#SelectRight";
            var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

            var selectedItems = $(selectFrom + " :selected").toArray();
            $(moveTo).append(selectedItems);
            selectedItems.remove;
            $("#SelectRight").find("option").prop("selected", true);
        });