JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<div>
    <select id='selectObjChosen' theme="simple" name="List" multiple="multiple" class="right_select" style="background-color: white; border: 1px solid #01a9db; border-radius: 10px; height: 149px; margin-bottom: 10px; margin-top: 10px; max-height: 270px; overflow-x: auto !important; overflow-y: hidden; padding: 7px; width: 100%;">
        <option value='ABC'>ABC</option>
        <option value='DEF'>DEF</option>
        <option value='PQR'>PQR</option>
        <option value='XYZ'>XYZ</option>
        <option value='MNO'>MNO</option>
        <option value='STU'>STU</option>
    </select>
</div>
<div style="width:45%; float:left; height:100px; ">
    <input type="button" name="^" value="^" id="buttonMoveUp" />
    <br/>
    <br/>
    <input type="button" name="v" value="v" id="buttonMoveDown" />
    <br/>
</div>

JavaScript

$(function () {
    $("#buttonMoveUp").click(function () {
        var selectedItems = $("select[id='selectObjChosen'] option:selected");
        selectedItems.insertBefore(selectedItems.first().prev());
    });

    $("#buttonMoveDown").click(function () {
        var selectedItems = $("select[id='selectObjChosen'] option:selected");
        selectedItems.insertAfter(selectedItems.last().next());
    });

    $('#selectObjChosen').change(function () {
        var selectedItems = $("select[id='selectObjChosen'] option:selected");
        var error = 0;
        if (selectedItems.length > 0) {
            var prevElem = undefined;
            selectedItems.each(function (index, value) {
                if (typeof prevElem != "undefined") {
                    if(typeof $(prevElem).next()[0] != "undefined"){
                        if($(prevElem).next()[0] != value){
                            error = 1;
                        }
                    }
                }
                prevElem = value;
            })
        }
        if(error){
            $('#buttonMoveUp,#buttonMoveDown').prop('disabled',true);
        }
        else{
            $('#buttonMoveUp,#buttonMoveDown').prop('disabled',false);
        }
    })

});