JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-offset-1 col-xs-4">
        <select id="multi-1" class="multi" multiple>
            <option value="item-1">Item 1</option>
            <option value="item-2">Item 2</option>
            <option value="item-3">Item 3</option>
            <option value="item-4">Item 4</option>
            <option value="item-5">Item 5</option>
        </select>
    </div>
    <div class="col-xs-2">
        <a href="#" id="arrow-all-left" class="arrow"><span class="glyphicon glyphicon-fast-backward"></span></a>
        <a href="#" id="arrow-left" class="arrow"><span class="glyphicon glyphicon-backward"></span></a> 
        <a href="#" id="arrow-right" class="arrow"><span class="glyphicon glyphicon-forward"></span></a>
        <a href="#" id="arrow-all-right" class="arrow"><span class="glyphicon glyphicon-fast-forward"></span></a>
    </div>
    <div class="col-xs-4">
        <select id="multi-2" class="multi" multiple>
        </select>
    </div>
</div>

CSS

.multi {
    width:100px;
    height:400px;
}

.arrow {
    font-size: 16px;
}

JavaScript

$(document).ready(function() {
    
    $('#arrow-all-right').click(function() {
        $('#multi-2').append($("#multi-1").html());
        $('#multi-1').find('option').attr('disabled','disabled');
        $('#multi-1').find('option').removeAttr('selected');
    });
    
    $('#arrow-all-left').click(function() {
        $('#multi-2').find('option').remove();
        $('#multi-1').find('option').removeAttr('disabled');
    });
    
    $('#arrow-right').click(function() {
        $("#multi-1 option:selected").each(function(){
            $('#multi-2').append("<option value="+$(this).val()+">"+$(this).text()+"</option>");

            $(this).attr('disabled','disabled');
            $(this).removeAttr('selected');
            
        });
    });
    
    $('#arrow-left').click(function() {
        $("#multi-2 option:selected ").each(function(){
            //$('#multi-1').append("<option value="+$(this).val()+">"+$(this).text()+"</option>");
            
            $("#multi-1 option[value="+$(this).val()+"]").removeAttr('disabled');
            
            $(this).remove();
        });
    });
});