Shifting List Items Positions

Shifting List Items Positions

On my web page I have a horizontal unordered list with three list items. Below the unordered list are left and right arrows. I would like to move a list item by selecting it then clicking the left or right arrow to move it left or right.

That also means the siblings of the selected list item will also have to move to new locations. I was able to select a list item then click the left or right arrow to change it's index value. However that does not move the list items to where they need to be. 

Please take a look at my code at  https://jsfiddle.net/jQing/x7r0ww1s/