JSFiddle - React, Tailwind, and code Playground

by CJ Ramki

HTML

<div class="first page">
    <img class="image" src="../img/Album1/1_1.jpg">
    <img class="image" src="../img/Album1/1_2.jpg">
    <img class="image" src="../img/Album1/1_3.jpg">
</div>
<div class="first page">
    <img class="image" src="../img/Album1/1_4.jpg">
    <img class="image" src="../img/Album1/1_5.jpg">
    <img class="image" src="../img/Album1/1_6.jpg">
    <img class="image" src="../img/Album1/1_7.jpg">
</div>
<div class="first page">
    <img class="image" src="../img/Album1/1_8.jpg">
    <img class="image" src="../img/Album1/1_9.jpg">
    <img class="image" src="../img/Album1/1_10.jpg">
</div>
</br>
<button>apasa</button>

CSS

.img {
    height:30px;
    width:30px;
    background:blue;
    margin-left:10px;
}
.selected {
    -moz-box-shadow: 0 0 7px 4px blue;
    -webkit-box-shadow: 0 0 7px 4px blue;
    box-shadow: 0 0 7px 4px blue;
}

JavaScript

(function($){
 
    $.fn.shuffle = function() {
 
        var allElems = this.get(),
            getRandom = function(max) {
                return Math.floor(Math.random() * max);
            },
            shuffled = $.map(allElems, function(){
                var random = getRandom(allElems.length),
                    randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
           });
 
        this.each(function(i){
            $(this).replaceWith($(shuffled[i]));
        });
 
        return $(shuffled);
 
    };
$('img').shuffle(); 
})(jQuery);


$(".image").click(function () {
    if ($(this).hasClass("selected")) $(this).removeClass("selected");
    else $(this).addClass("selected");
});

$('button').click(function () {
    var counter = 0;
    var selected = 0;
    $('img.selected').each(function () {
        var srcAttr = $(this).attr('src');
        var result = /[^_]*$/.exec(srcAttr)[0]; // get after string from underscore (_)
        selected++;
        if (result == '1.jpg' || result == '2.jpg' || result == '3.jpg') counter++;
    });
    if (counter == 3 && selected == 3) alert('now its done!');
});

/*
$("button").click(function() {
    var selected = $('.selected');
    
    var c1=0;
    selected.each(function (i, el) {
        if (el.src.indexOf('_1.jpg') >= 0) {
            c1=1;
        }
    });
    
    var c2=0;
    selected.each(function (i, el) {
        if (el.src.indexOf('_2.jpg') >= 0) {
            c2=1;
        }
    });
    
    var c3=0;
     selected.each(function (i, el) {
        if (el.src.indexOf('_3.jpg') >= 0) {
            c3=1;
        }
    });
    
    if(c1==1 && c2==1 && c3==1 && selected.length==3){
        alert("now its done!");
    }
    
    
});


 //   if(images.length==3 && )
  //      alert("now");

*/

$("img[src*='_1.jpg']").width("100px");
$("img[src*='_2.jpg']").width("100px");
$("img[src*='_3.jpg']").width("100px");