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 img = "", img1 = "";
var counter = 0;
$("img").click(function(){
    ++counter;
    if(counter == 2)
    {
        $("#"+img).attr("src",$(this).attr("src")); 
        $(this).attr("src",img1);
         
         img = "";
         img1 = "";
         counter = 0;   
    }
    else
    {
        img = $(this).attr("id");
        img1 = $(this).attr("src");
    }
});