JSFiddle - React, Tailwind, and code Playground

HTML

<div id="grid">  
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
</div>

CSS

.box {
    border:1px black solid;
    width:100px;
    height:100px;
    float:left;
    line-height:100px;
    text-align:center;
    font-size:50px;   
}

JavaScript

$(function() {
	jQuery.extend({
		random: function(X) {
			return Math.floor(X * (Math.random() % 1));
		},
		randomBetween: function(MinV, MaxV) {
			return MinV + jQuery.random(MaxV - MinV + 1);
		}
	});

	jQuery.fn.swap = function (b) {
		b = jQuery(b)[0];
		var a = this[0];

		var t = a.parentNode.insertBefore(document.createTextNode(""), a);
		b.parentNode.insertBefore(a, b);
		t.parentNode.insertBefore(b, t);
		t.parentNode.removeChild(t);

		return this;
	}

	var numItems = $("#grid .box").length - 1;

	for (var i = 0; i < Math.floor(numItems); i++) {
		$("#grid .box:eq("+$.randomBetween(0, numItems)+")").swap("#grid .box:eq("+$.randomBetween(0, numItems)+")");
	};
});