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;

// Function for Comparing Arrays
// source: http://stackoverflow.com/questions/7837456/
Array.prototype.compare = function (array) {
    if (!array)
        return false;

    if (this.length != array.length)
        return false;

    for (var i = 0, l=this.length; i < l; i++) {
        if (this[i] instanceof Array && array[i] instanceof Array) {
            if (!this[i].compare(array[i]))
                return false;
        }
        else if (this[i] != array[i]) {
            return false;
        }
    }
    return true;
}

$(document).ready(function() {
    
// Store the correct order first in an array.
var correctOrder = $("#puzzle > img").map(function() {
  return $(this).attr("src");
}).get();

// Randomize your images
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;
      
        
        // Get the current order of the images
        var currentOrder = $("#puzzle > img").map(function() {
          return $(this).attr("src");
        }).get();
        
        // Compare the current order with the correct order
        if (currentOrder.compare(correctOrder)) alert("Puzzle completed");
    }
});
    
    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++) {
            console.log("Image " + i + ": " + images[i].src);
            
        }
    }
}
});