JSFiddle - React, Tailwind, and code Playground

HTML

<section id="container">
  <div style="background-color: #111"> 1 </div>
  <div style="background-color: #222"> 2 </div>
  <div style="background-color: #333"> 3 </div>
  <div style="background-color: #444"> 4 </div>
  <div style="background-color: #555"> 5 </div>
  <div style="background-color: #666"> 6 </div>
  <div style="background-color: #777"> 7 </div>
  <div style="background-color: #888"> 8 </div>
  <div style="background-color: #999"> 9 </div>
</section>
<button id="shuffle">Shuffle
</button>

CSS

section {
  width: 90px;
  height: 90px;
}

div {
  float: right;
  width: 30px;
  height: 30px;
  text-align: center;
  color: fff;
}

JavaScript

$container = $("#container");
$divList = $("div");

$("#shuffle").on("click", function() {
  //copy and remove all divs
  $divCopy = $divList.clone(true);
  $("div").remove();

  while ($divCopy.length > 0) {
    //chose random index of div array
    var randomIndex = Math.floor(Math.random() * $divList.length);

    $container.append($divCopy.splice(randomIndex, 1));
  }
});