JSFiddle - React, Tailwind, and code Playground

HTML

<div id="selected">
    <div><strong>Selected</strong></div>
    <div id="selected-items">
        <select multiple="multiple" id="selected-items-select">
            <option>one</option>
            <option>two</option>
            <option>three</option>
            <option>four</option>
        </select> 
    </div>
</div>

<div id="priority">
    <div><input type="button" id="move-up" value=" ^ " /></div>
    <div><input type="button" id="move-down" value=" v " /></div>
</div>

CSS

#selected {
    float: left;
}

JavaScript

$(document).ready(function() {
    $('#move-up').click(moveUp);
    $('#move-down').click(moveDown);
});

function moveUp() {
    $('#selected-items select :selected').each(function(i, selected) {
        if (!$(this).prev().length) return false;
        $(this).insertBefore($(this).prev());
    });
    $('#selected-items select').focus().blur();
}

function moveDown() {
    $($('#selected-items select :selected').get().reverse()).each(function(i, selected) {
        if (!$(this).next().length) return false;
        $(this).insertAfter($(this).next());
    });
    $('#selected-items select').focus().blur();
}