JSFiddle - React, Tailwind, and code Playground

by Porfirio Chavez

HTML

<div class="palette">
    <div class="choices">
        <select multiple="true" class="unselected" style="width: 100%; height: 100%;">
            <option>bla</option>
            <option>ble</option>
            <option>bli</option>
            <option>blo</option>
        </select>
    </div>
    <div class="controls">
        <input type="button" class="add" value=">" />
        <input type="button" class="remove" value="<" />
        <input type="button" class="down" value="v" />
        <input type="button" class="up" value="^" />
    </div>
    <div class="choices">
        <select multiple="true" class="selected" style="width: 100%; height: 100%;" id="lista">
        </select>
    </div>
    <br>
    <strong id="valor">valor</strong>
</div>

CSS

div.choices {
    display: inline-block;
    vertical-align: middle;
    height: 150px;
    width: 120px;
    background-color: red;
}

div.controls {
    display: inline-block;
    width: 25px;
    margin-left: 20px;
    margin-right: 20px;
    vertical-align: middle;
}

JavaScript

$(document).ready(function() {
    $('.palette .add').click(function(e) {
        var options = $('select.unselected option:selected');
        
        /*Agregamos y obtenemos el valor*/
        var $valor = options.val();
        recuperarValor($valor);
        
        
        $('select.selected').append(options);
        e.preventDefault();
        return false;
    });
    $('.palette .remove').click(function(e) {
        var options = $('select.selected option:selected');
        
        /*Agregamos y obtenemos el valor*/
        var $valor = options.val();
        quitarValor($valor);
        
        $('select.unselected').append(options);
        e.preventDefault();
        return false;
    });
    $('.palette .down').click(function(e) {
        var options = $('select.selected option:selected');
        options.last().next().after(options)
        e.preventDefault();
        return false;
    });
    $('.palette .up').click(function(e) {
        var options = $('select.selected option:selected');
        options.first().prev().before(options)
        e.preventDefault();
        return false;
    });
    var arreglo = [];
    
    function recuperarValor(valor){
        var foo = [];
        $('.unselected :selected').each(function(i, selected){ 
            foo[i] = $(selected).text();
//            alert($(selected).text());
        });
        
        for($i = 0; $i < foo.length; $i++){ 
        //var index = arreglo.indexOf(valor);
            var index = foo[$i];
            arreglo.push(index);
        $("#valor").html(" <b>valor:</b> " + arreglo);
        }
        
        //arreglo.push(valor);
        //$("#valor").html(" <b>valor:</b> " + arreglo);
    }
    
    function quitarValor(valor){
        var foo = []; 
        $('.selected :selected').each(function(i, selected){ 
            foo[i] = $(selected).text(); 
        });
        
        for($i = 0; $i < foo.length; $i++){ 
        //var index = arreglo.indexOf(valor);
           ...