JSFiddle - React, Tailwind, and code Playground

by l2aelba

HTML

<div class="grid">
  <div class="level-1">
    <div class="level-2">A</div>
    <div class="level-2">B</div>
    <div class="level-2">C</div>
  </div>
  <div class="level-1">
    <div class="level-2">D</div>
    <div class="level-2">E</div>
    <div class="level-2">F</div>
  </div>
  <div class="level-1">
    <div class="level-2">G</div>
    <div class="level-2">H</div>
    <div class="level-2">I</div>
  </div>
</div>

CSS

.level-2 {
  width: 3rem;
  height: 3rem;
  background-color: black;
  margin: .5rem;
  color: white;
  display: inline-block;
}

JavaScript

$.fn.randomize = function(a,b) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(a).children(b);
      var len = $this.find(a).eq(0).find(b).length;

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.detach(a);  

      for(var i=0; i < elems.length; i++) {
      	$this.find(a).eq(i%len).append(elems[i]);
      }

  });    
}

$('.grid').randomize('.level-1','.level-2');