JSFiddle - React, Tailwind, and code Playground

by Darth Vader

HTML

<div id="container">
    <div class="box-red">1</div>
    <div class="box-red">2</div>
    <div class="box-red">3</div>
    <div class="box-red">4</div>
    <div class="box-red">5</div>
    <div class="box-yellow">6</div>
    <div class="box-yellow">7</div>
    <div class="box-yellow">8</div>
    <div class="box-yellow">9</div>
    <div class="box-yellow">10</div>
    <div class="box-yellow">11</div>
    <div class="box-yellow">12</div>
    <div class="box-red">1</div>
    <div class="box-red">2</div>
    <div class="box-red">3</div>
    <div class="box-red">4</div>
    <div class="box-red">5</div>
    <div class="box-yellow">6</div>
    <div class="box-yellow">7</div>
    <div class="box-yellow">8</div>
    <div class="box-yellow">9</div>
    <div class="box-yellow">10</div>
    <div class="box-yellow">11</div>
    <div class="box-yellow">12</div>
</div>

CSS

.box-yellow {
    width: 50px;
    height: 50px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: yellow;
    float:left;
}
.box-red {
    float:left;
    width: 50px;
    height: 50px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: red;
}

JavaScript

$('.box-red').click(function () {

    var currentNodeIndex = $(this).index();

    var container = $('#container');

    var nodes = container.children();

    nodes = shuffle(nodes);
    console.log("Shuffled nodes", nodes);
    
    if (!$(nodes[currentNodeIndex]).hasClass('yellow')) {
        for (var index = 0; index < nodes.length; index++) {
            if (index != currentNodeIndex && $(nodes[index]).hasClass("box-yellow")) {
                var redNode = nodes[currentNodeIndex];
                nodes[currentNodeIndex] = nodes[index];
                nodes[index] = redNode;
                break;
            }
        }
    }

    for (var index = 0; index < nodes.length; index++) {
        container.append(nodes[index]);
    }
});

function shuffle(nodes) {
    var length = nodes.length;
    var randomPick, randomSwap;
    for (var index = length; index > 0; index--) {
        randomPick = Math.floor(Math.random() * index);
        randomSwap = nodes[index - 1];
        nodes[index - 1] = nodes[randomPick];
        nodes[randomPick] = randomSwap;

    }
    return nodes;
}