JSFiddle - React, Tailwind, and code Playground

by Ken Z

HTML

<section class="container">
    <div>
        <select id="leftValues" name="leftValues[]" size="5" multiple>
            <option value="a">1</option>
            <option value="b">2</option>
            <option value="c">3</option>
        </select>
        <input type="hidden" id="txtLeft" name=txtLeft/>
    </div>
    <div>
        <input type="button" id="btnLeft" value="&lt;&lt;" />
        <input type="button" id="btnRight" value="&gt;&gt;" />
    </div>
    <div>
        <select id="rightValues" name=rightValues[] size="4" multiple>
            <option value="x">9</option>
            <option value="y">8</option>
            <option value="z">7</option>
        </select>
        <div>
            <input type="hidden" id="txtRight" name=txtRight/>
        </div>
    </div>
</section>
<button type="submit" id="value"  class="blue">Save</button>

CSS

SELECT, INPUT[type="text"] {
    width: 160px;
    box-sizing: border-box;
}
SECTION {
    padding: 8px;
    background-color: #f0f0f0;
    overflow: auto;
}
SECTION > DIV {
    float: left;
    padding: 4px;
}
SECTION > DIV + DIV {
    width: 40px;
    text-align: center;
}

JavaScript

var left;
var right;
var newLeft;
var newRight;
var addedLeftValues = new Array();
var addedRightValues = new Array();

$(document).ready(function() { 
    SaveOldValues();
});

function SaveOldValues()
{
    left = new Array();
    right = new Array();
    $('#leftValues .left').each(function(){
        left.push($(this).val());
    });
    $('#rightValues .right').each(function(){
        right.push($(this).val());
    });
}

function UpdatedValues()
{
    newLeft = new Array();
    newRight = new Array();
    $('#leftValues .left').each(function(){
        newLeft.push($(this).val());
    });
    $('#rightValues .right').each(function(){
        newRight.push($(this).val());
    });;
}

$("#btnLeft").click(function () {
    var selectedItem = $("#rightValues option:selected");
    $(selectedItem).attr("class","left");
    $("#leftValues").append(selectedItem);
});

$("#btnRight").click(function () {
    var selectedItem = $("#leftValues option:selected");
    $(selectedItem).attr("class","right");
    $("#rightValues").append(selectedItem);
});

$("#rightValues").change(function () {
    var selectedItem = $("#rightValues option:selected");
});

$("#value").on("click",function(){
    UpdatedValues();
    $(newLeft).each(function(k,value){
        if($.inArray(value, left) == -1)
        {
            alert("new value in left is: " + value);
            addedLeftValues.push(value);
            $("#txtLeft").val(function(i, v) {
                arr.push(addedLeftValues);
            });

        }
    });
    $(newRight).each(function(k,value){
        if($.inArray(value, right) == -1)
        {
            alert("new value in Right is: " + value);
            addedRightValues.push(value);
            $("#txtRight").val(function(i, v) {
                arr.push(addedRightValues);
            });
        }
    });
});