JSFiddle - React, Tailwind, and code Playground

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" />
</div>

CSS

#puzzle {
    position:absolute;
    width:85vh;
    height:85vh;
    left: 0%;
}

.element {
    width:40%;
    height:25%;
}

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;
    }
});