JSFiddle - React, Tailwind, and code Playground

by Fábio Silva

HTML

<div class="container">
    <div class="random">1</div>
    <div class="random">2</div>
    <div class="random">3</div>
    <div class="random">4</div>
    <div class="random">5</div>
    <div class="random">6</div>
    <div class="random">7</div>
    <div class="random">8</div>
</div>

JavaScript

function shuffle(array) {
  var currentIndex = array.length
    , temporaryValue
    , randomIndex
    ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

$.fn.randomize = function (childElem) {
     
    return this.each(function () {
        var $this = $(this);
        var elems = shuffle($(childElem));
        $this.remove(childElem);
        for (var i = 0; i < elems.length; i++)
            $this.append(elems[i]);
    }); 
}

$(document).ready(function () {
    $("div.container").randomize("div.random");
});