JSFiddle - React, Tailwind, and code Playground
HTML
<select size="10" multiple id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" value="Up" onclick="moveUp()">
<input type="button" value="Down" onclick="moveDown()">
JavaScript
function moveUp() {
var select = document.getElementById("select");
var i1=0, i2=1;
while (i2 < select.options.length) {
swapIf(select,i1++,i2++);
}
}
function moveDown() {
var select = document.getElementById("select");
var i1=select.options.length-1, i2=i1-1;
while (i1 > 0) {
swapIf(select,i1--,i2--);
}
}
var swapVar = '';
function swapIf(select,i1,i2) {
if ( ! select[i1].selected && select[i2].selected) {
swapVar = select[i2].text;
select[i2].text = select[i1].text;
select[i1].text = swapVar;
swapVar = select[i2].value;
select[i2].value = select[i1].value;
select[i1].value = swapVar;
select[i1].selected = true;
select[i2].selected = false;
}
}