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 bucati;
var imagini = new Array();
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);

     for (var i = 0; i < 16; i++)
    {
        bucati = document.getElementById("bucata" + i);
        imagini.push(bucati);
    }
    
$("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;
    }
});
});

$(function() {
        $("#puzzle").sortable({
            update: function() {
                var CorrectAnswers = ["bucata0", "bucata1", "bucata2", "bucata3", "bucata4", "bucata5", "bucata6", "bucata7", "bucata8", "bucata9", "bucata10", "bucata11", "bucata12", "bucata13", "bucata14", "bucata15"];
                var UserAnswers = [];
                $('#puzzle img').each(function(){
                    var imageId = $(this).attr("id");
                    UserAnswers += imageId.replace("recordArr_", "")+",";
                });           
                    UserAnswers = UserAnswers.substr(0,(UserAnswers.length) -1);
                if(UserAnswers == CorrectAnswers){
                    alert("You  Won");
                }
            }
        });
    });