JSFiddle - React, Tailwind, and code Playground

HTML

<div class="stats__grid--desktop">
  <div class="grid__row gtop">
    <div class="grid__box" id="g0">
      <img class="swap">
      <img class="swap">
    </div>
    <div class="grid__box" id="g1">
      <img class="swap">
      <img class="swap">
    </div>
    <div class=" grid__box" id="g2">
      <img class="swap">
      <img class="swap">
    </div>
  </div>
  <div class="grid__row gmiddle">
    <div class="grid__box" id="g3">
      <img class="swap">
      <img class="swap">
    </div>
    <div class="grid__box" id="g4">
      <img class="swap">
      <img class="swap">
    </div>
    <div class=" grid__box" id="g5">
      <img class="swap">
      <img class="swap">
    </div>
  </div>
  <div class="grid__row gbottom">
    <div class="grid__box" id="g6">
      <img class="swap">
      <img class="swap">
    </div>
    <div class="grid__box" id="g7">
      <img class="swap">
      <img class="swap">
    </div>
    <div class=" grid__box" id="g8">
      <img class="swap">
      <img class="swap">
    </div>
  </div>
</div>

CSS

.grid__box {
  position: relative;
  width: 150px;
  height: 150px;
  padding: 5px;
  float: left;
}

.grid__row {
  height: 160px;
  width: 480x;
}

.swap {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 150px;
}

JavaScript

var imgArray = ["https://placebear.com/100/100",
  "https://placebear.com/150/151",
  "https://placebear.com/150/152",
  "https://placebear.com/150/153",
  "https://placebear.com/150/154",
  "https://placebear.com/150/155",
  "https://placebear.com/150/156",
  "https://placebear.com/150/157",
  "https://placebear.com/150/158",
  "https://placebear.com/150/159",
  "https://placebear.com/150/160",
  "https://placebear.com/150/161",
  "https://placebear.com/150/162",
  "https://placebear.com/150/163",
  "https://placebear.com/150/164"
];

function loadImages() {
  $('.grid__box').each(function(i) {
    var newImage = imgArray.splice(0,1)[0];
    $(this).find('.swap').attr('src', newImage);
  });
}

function swapImage() {
  var imgChoice = Math.floor(Math.random() * imgArray.length);
  var newImage = imgArray.splice(imgChoice,1)[0];

  var target = Math.floor(Math.random() * $('.grid__box').length);
 
 	var mainImg = $('#g' + target + ' .swap').eq(1);
  var swapImg = $('#g' + target + ' .swap').eq(0);
 
  swapImg.show().attr('src', newImage);
  imgArray.push(mainImg.attr('src'));
  swapImg.fadeIn(3000);
  mainImg.fadeOut(3000, function() {
  	swapImg.insertAfter(mainImg);
    swapImage();
  });
}

loadImages();
swapImage();