html jquery move items from listbox to other listbox then move items up and down

Question

I have listbox and I can move items to another listbox with this code

$().ready(function() {  
   $('#add').click(function() {  
    return !$('#select1 option:selected').remove().appendTo('#select2');  
   });  
   $('#remove').click(function() {  
    return !$('#select2 option:selected').remove().appendTo('#select1');  
   });  
  });

<select multiple="multiple" name="listbox1" id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
<a href="#" id="add">&gt;&gt;</a><br/>
<a href="#" id="remove">&lt;&lt;</a>
<select multiple="multiple" name="listbox2" id="select2"></select>

With the code above I can move items from listbox1 to listbox2 and everything works fine.

I need to move items in listbox2 up and down

I googled and found that javascript code but I don't know how I can use it for listbox2 only

https://jsfiddle.net/m0f757wh/

Answer 1

Refer to this question.

I just added event listeners to the buttons and followed the above post. I think the code is self-explanatory. Let me know if you're confused.

 $().ready(function() { $('#add').click(function() { return !$('#select1 option:selected').remove().appendTo('#select2'); }); $('#remove').click(function() { return !$('#select2 option:selected').remove().appendTo('#select1'); }); let $select1 = $('#select1'); let $select2 = $('#select2'); $('#up1').click(function () { let $selected = $select1.find('option:selected'); $selected.insertBefore($selected.prev()); }); $('#down1').click(function () { let $selected = $select1.find('option:selected'); $selected.insertAfter($selected.next()); }); $('#up2').click(function () { let $selected = $select2.find('option:selected'); $selected.insertBefore($selected.prev()); }); $('#down2').click(function () { let $selected = $select2.find('option:selected'); $selected.insertAfter($selected.next()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <select multiple="multiple" name="listbox1" id="select1"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> <td> <a href="#" id="add">&gt;&gt;</a><br/> <a href="#" id="remove">&lt;&lt;</a> <select multiple="multiple" name="listbox2" id="select2"></select> </td> </tr> <tr> <td> <button id="up1">&uarr;</button> <button id="down1">&darr;</button> </td> <td> <button id="up2">&uarr;</button> <button id="down2">&darr;</button> </td> </tr> </table>