JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bloc">
    <select id="list1" multiple="multiple" rows=2>
        <option value=1>Option 1</option>
        <option value=2>Option 2</option>
        <option value=3>Option 3</option>
        <option value=4>Option 4</option>
        <option value=5>Option 5</option>
        <option value=6>Option 6</option>
    </select>
   </div>
 <div style="display:inline-block;">
    <input id="button1" type="button" value=">>" />
    <br/>
    <input id="button2" type="button" value="<<" />
 </div>
<div class="bloc">
    <select id="list2" multiple="multiple" rows=2>        
    </select>   
</div>

CSS

.bloc { display:inline-block; vertical-align:top; overflow:hidden; border:solid grey 1px; width:100px;}
 .bloc select { padding:10px; margin:-5px -20px -5px -5px; }

JavaScript

$(function(){
    $("#button1").click(function(){
        $("#list1 > option:selected").each(function(){
            $(this).remove().appendTo("#list2");
        });
    });
    
    $("#button2").click(function(){
        $("#list2 > option:selected").each(function(){
            $(this).remove().appendTo("#list1");
        });
    });
});