JSFiddle - React, Tailwind, and code Playground
HTML
<table border="0">
<tr>
<td>
<select id="sel1" size="10" multiple="multiple">
<option value="1">Left1</option>
<option value="2">Left2</option>
<option value="3">Left3</option>
<option value="4">Left4</option>
<option value="5">Left5</option>
</select>
</td>
<td align="center" valign="middle">
<button id="goRight">--></button>
<br>
<button id="goLeft"><--</button>
</td>
<td>
<select id="sel2" size="10" multiple="multiple">
<option value="1">Right1</option>
<option value="2">Right2</option>
<option value="3">Right3</option>
<option value="4">Right4</option>
<option value="5">Right5</option>
</select>
</td>
</tr>
</table>
JavaScript
var ctrlMode = false;
$(document).keydown(function(e){
if(e.ctrlKey){
ctrlMode = true;
};
});
$(document).keyup(function(e){
ctrlMode = false;
});
$('#sel1 option').on('click', function(){
if(!ctrlMode)$('#sel1 option').each(function(){
if($(this).hasClass('selected'))$(this).removeClass('selected');
})
$(this).addClass('selected');
});
$('#goRight').on('click', function(){
$('#sel1 option').each(function(){
if($(this).hasClass('selected')){
$(this)
.appendTo('#sel2')
.attr("selected", false)
.removeClass('selected');
}
})
});
$('#sel2 option').on('click', function(){
if(!ctrlMode)$('#sel2 option').each(function(){
if($(this).hasClass('selected'))$(this).removeClass('selected');
})
$(this).addClass('selected');
});
$('#goLeft').on('click', function(){
$('#sel2 option').each(function(){
if($(this).hasClass('selected')){
$(this)
.appendTo('#sel1')
.attr("selected", false)
.removeClass('selected');
}
})
});