JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rightPanel">
    <img src="http://www.placehold.it/170x113/ffff66" />
    <img src="http://www.placehold.it/170x113/ff66ff" />
    <img src="http://www.placehold.it/170x113/66ffff" />
    <img src="http://www.placehold.it/170x113/66ff66" />
</div>

<a id="downButton" href='#'>DOWN</a> | <a id="upButton" href='#'>UP</a>

CSS

#rightPanel {width:190px; background:rgba(0,0,0,.5);
position:absolute;
top:0; right:0; bottom:20px;
overflow:hidden;
}
#rightPanel img {margin:10px;}

JavaScript

var rightPanel = document.getElementById('rightPanel');
var images = rightPanel.getElementsByTagName('img');
var downButton = document.getElementById('downButton');
var upButton = document.getElementById('upButton');

downButton.onclick = function(){
    rightPanel.appendChild(images[0]);
}
upButton.onclick = function(){
    rightPanel.insertBefore(images[images.length-1],images[0]);
}