JSFiddle - React, Tailwind, and code Playground

HTML

<div>  
  <select multiple id="select1">  
   <option value="1">Account</option>  
   <option value="2">Desktop</option>  
   <option value="3">Printer</option>  
   <option value="4">Servers</option>
   <option value="5">VMs</option>
   <option value="6">Web-site</option>
  </select>  
  <a href="#" id="add">add &gt;&gt;</a>  
 </div>  
 <div>  
  <select multiple id="select2"></select>  
  <a href="#" id="remove">&lt;&lt; remove</a>  
 </div>

CSS

a {  
   display: block;  
   border: 1px solid #aaa;  
   text-decoration: none;  
   background-color: #fafafa;  
   color: #123456;  
   margin: 2px;  
   clear:both;  
  }  
  div {  
   float:left;  
   text-align: center;  
   margin: 10px;  
  }  
  select {  
   width: 100px;  
   height: 80px;  
  }

JavaScript

$().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });