JSFiddle - React, Tailwind, and code Playground

by Carl Angelo Nievarez

HTML

<form method="POST">
<select id="contentlist" name="itemId" multiple="multiple">
	<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>
<button id="Up" onclick="moveUp(); return false;">Up</button>
<button id="Down" onclick="moveDown(); return false;">Down</button>
</form>

JavaScript

function moveUp()
        {
            var ddl = document.getElementById('contentlist');
            //var size = ddl.length;
            //var index = ddl.selectedIndex;
            var selectedItems = new Array();
			var temp = {innerHTML:null, value:null};
            for(var i = 0; i < ddl.length; i++)
                if(ddl.options[i].selected)             
                    selectedItems.push(i);

            if(selectedItems.length > 0)    
                if(selectedItems[0] != 0)
                    for(var i = 0; i < selectedItems.length; i++)
                    {
						temp.innerHTML = ddl.options[selectedItems[i]].innerHTML;
						temp.value = ddl.options[selectedItems[i]].value;
                        ddl.options[selectedItems[i]].innerHTML = ddl.options[selectedItems[i] - 1].innerHTML;
                        ddl.options[selectedItems[i]].value = ddl.options[selectedItems[i] - 1].value;
                        ddl.options[selectedItems[i] - 1].innerHTML = temp.innerHTML; 
                        ddl.options[selectedItems[i] - 1].value = temp.value; 
                        ddl.options[selectedItems[i] - 1].selected = true;
                        ddl.options[selectedItems[i]].selected = false;
                    }
        }

        function moveDown()
        {
            var ddl = document.getElementById('contentlist');
            //var size = ddl.length;
            //var index = ddl.selectedIndex;
            var selectedItems = new Array();
			var temp = {innerHTML:null, value:null};
            for(var i = 0; i < ddl.length; i++)
                if(ddl.options[i].selected)             
                    selectedItems.push(i);

            if(selectedItems.length > 0)    
                if(selectedItems[selectedItems.length - 1] != ddl.length - 1)
                    for(var i = selectedItems.length - 1; i >= 0; i--)
                    {
                        temp.innerHTML = ddl.options[selectedItems[i]].innerHTML;
              ...