JSFiddle - React, Tailwind, and code Playground

HTML

<select name="sourceSelect" id="sourceSelect" size="4">
    <option value="example1">Example1</option>
    <option value="example2">Example2</option>
    <option value="example3">Example3</option>
    <option value="example4">Example4</option>
    <option value="example5">Example5</option>
    <option value="example6">Example6</option>
    <option value="example7">Example7</option>
    <option value="example8">Example8</option>
    <option value="example9">Example9</option>
</select>
<input type="button" name="moveup" id="moveup" value="up" />
<input type="button" name="movedown" id="movedown" value="down" />

JavaScript

var showSelected = function(selector) {
    var thisSelect = $(selector);
    var thisIndex = thisSelect.find(":selected").index();
    var lastPos = 0;
    thisSelect.children().each(function() {
        lastPos++;
    });
    var currScrollPos = (thisIndex / lastPos) * parseInt(thisSelect[0].scrollHeight);
    thisSelect.scrollTop(currScrollPos);
}

$('#moveup').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':first-child')) {
        opt.insertAfter($('#sourceSelect option:last-child'));
    } else {
        opt.insertBefore(opt.prev());
    };
    showSelected("#sourceSelect");
});

$('#movedown').click(function() {
    var opt = $('#sourceSelect option:selected');
    if (opt.is(':last-child')) {
        opt.insertBefore($('#sourceSelect option:first-child'));
    } else {
        opt.insertAfter(opt.next())[0];
    };
    showSelected("#sourceSelect");
});