JSFiddle - React, Tailwind, and code Playground

HTML

<div id="puzzle" >
<img class="swapable" id="image1" src="http://s23.postimg.org/epckxn8uz/image.jpg"/>
<img class="swapable" id="image2" src="http://s21.postimg.org/ojn1m2eev/image.jpg" />
<img class="swapable" id="image3" src="http://s27.postimg.org/5ivu6tvir/image.jpg" />
<img class="swapable" 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 firstId = '';
var firstSrc = '';
$('img').click(function(){
    if (firstId !== '') {
        var secondId = $(this).attr('id');
        var secondSrc = $(this).attr('src');
        $('#' + secondId).attr('src', firstSrc);
        $('#' + firstId).attr('src', secondSrc);
        firstId = '';
        firstSrc = '';
    }
    else
    {
        firstId = $(this).attr('id');
        firstSrc = $(this).attr('src');
    }
});