JSFiddle - React, Tailwind, and code Playground

by Francois Wahl

HTML

<div id="target"></div>
<hr />
<div id="list">
    <ul>
        <li><img id="1" src="http://www.fileden.com/files/2012/6/19/3318010/Eraser.png"/></li>
        <li><img id="2" src="http://www.fileden.com/files/2012/6/19/3318010/Script.png"/></li>
        <li><img id="3" src="http://www.fileden.com/files/2012/6/19/3318010/Ok.png"/></li>
        <li><img id="4" src="http://www.fileden.com/files/2012/6/19/3318010/Decrease%20time.png"/></li>
        <li><img id="5" src="http://www.fileden.com/files/2012/6/19/3318010/Graphic%20tools.png" /></li>
        <li><img id="6" src="http://www.fileden.com/files/2012/6/19/3318010/Webcam.png"/></li>
    </ul>
</div>

JavaScript

$("ul li img").on("click", function() {
    var currentImage = $(this);
    var lastImage = $("#target img");
    var placeHolder = $("#last-image-position");
    
    lastImage.insertBefore("#last-image-position");
    $("#last-image-position").remove();
    
    $("<div id='last-image-position'><div>").insertBefore(currentImage);
    
    currentImage.appendTo('#target');
});