JSFiddle - React, Tailwind, and code Playground

HTML

<div id="puzzle" >
<img class="element" id="bucata0" src="http://placehold.it/350x150&text=A"/>
<img class="element" id="bucata1" src="http://placehold.it/350x150&text=B" />
<img class="element" id="bucata2" src="http://placehold.it/350x150&text=C" />
<img class="element" id="bucata3" src="http://placehold.it/350x150&text=D" />
<img class="element" id="bucata4" src="http://placehold.it/350x150&text=E"/>
<img class="element" id="bucata5" src="http://placehold.it/350x150&text=F" />
<img class="element" id="bucata6" src="http://placehold.it/350x150&text=G" />
<img class="element" id="bucata7" src="http://placehold.it/350x150&text=H" />
<img class="element" id="bucata8" src="http://placehold.it/350x150&text=I"/>
<img class="element" id="bucata9" src="http://placehold.it/350x150&text=J" />
<img class="element" id="bucata10" src="http://placehold.it/350x150&text=K" />
<img class="element" id="bucata11" src="http://placehold.it/350x150&text=L" />
<img class="element" id="bucata12" src="http://placehold.it/350x150&text=M"/>
<img class="element" id="bucata13" src="http://placehold.it/350x150&text=N" />
<img class="element" id="bucata14" src="http://placehold.it/350x150&text=O" />
<img class="element" id="bucata15" src="http://placehold.it/350x150&text=P" />
</div>

CSS

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

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

JavaScript

var clickCount = 0;
var imgSrc;
var lastImgId;

$(document).ready(function() {
var a = $("#puzzle > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var bi = a[i];
    var bj = a[j];
    a[i] = bj;
    a[j] = bi;
    }
$("#puzzle").append(a);
    
$("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;
    }
});
    
    var puzzle = document.getElementById("puzzle");
if (puzzle) {
    var images = puzzle.getElementsByTagName("img");
    if (images && images.length > 0) {
        for (var i=0; i<images.length; i++) {
            alert("Image " + i + ": " + images[i].src);
            
        }
    }
}
});