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 hiddenImage = $("ul li img[hidden='hidden']");

    $("#target").html("");
    currentImage.clone().appendTo('#target');
    
    hiddenImage.removeAttr("hidden");
    currentImage.attr("hidden", "hidden");
});