JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
</div>

JavaScript

$(document).ready(function () {
    $(".grid-item").click(function () {
        var selected = this;
        var queue = $.Deferred().resolve(); // create an empty queue
        $('.grid > div').not(selected).get().shuffle().forEach(function (div) {
            queue = queue.then(function () {
                return $(div).fadeTo(200, 0).promise();
            })
        });
    });
});

Array.prototype.shuffle = function() {
  var currentIndex = this.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 = this[currentIndex];
    this[currentIndex] = this[randomIndex];
    this[randomIndex] = temporaryValue;
  }

  return this;
};