JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div id="puzzle">
    <img class="element" id="image1" src="http://s23.postimg.org/epckxn8uz/image.jpg" />
    <img class="element" id="image2" src="http://s21.postimg.org/ojn1m2eev/image.jpg" />
    <img class="element" id="image3" src="http://s27.postimg.org/5ivu6tvir/image.jpg" />
    <img class="element" id="image4" src="http://s15.postimg.org/oznwrj0az/image.jpg" />
    <img class="element" id="image5" src="http://s23.postimg.org/epckxn8uz/image.jpg" />
    <img class="element" id="image6" src="http://s21.postimg.org/ojn1m2eev/image.jpg" />
    <img class="element" id="image7" src="http://s27.postimg.org/5ivu6tvir/image.jpg" />
    <img class="element" id="image8" src="http://s15.postimg.org/oznwrj0az/image.jpg" />
    <img class="element" id="image9" src="http://s23.postimg.org/epckxn8uz/image.jpg" />
    <img class="element" id="image10" src="http://s21.postimg.org/ojn1m2eev/image.jpg" />
    <img class="element" id="image11" src="http://s27.postimg.org/5ivu6tvir/image.jpg" />
    <img class="element" id="image12" src="http://s15.postimg.org/oznwrj0az/image.jpg" />
    <img class="element" id="image13" src="http://s23.postimg.org/epckxn8uz/image.jpg" />
    <img class="element" id="image14" src="http://s21.postimg.org/ojn1m2eev/image.jpg" />
    <img class="element" id="image15" src="http://s27.postimg.org/5ivu6tvir/image.jpg" />
    <img class="element" id="image16" src="http://s15.postimg.org/oznwrj0az/image.jpg" />
</div>

CSS

#puzzle {
    position:absolute;
    width:100vh;
    height:100vh;
    left: 0%;
}
.element {
    width:24%;
    height:24%;
}

JavaScript

var clickCount = 0;
var imgSrc;
var lastImgId;
$("img.element").click(function () {
    if (clickCount == 0) {
        imgSrc = $(this).attr("src");
        lastImgId = $(this).attr("id");
        clickCount++;
    } else {
        $("#" + lastImgId).attr("src", $(this).attr("src"));
        $(this).attr("src", imgSrc)
        clickCount = 0;
    }
});