JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="shell s1" id="s_1"></div>
    <div class="shell s2" id="s_2"><div id="ball"></div></div>
    <div class="shell s3" id="s_3"></div>
</div>

<a href="#" id="randomize">randomize</a>
<a href="#" id="stop">stop</a>

CSS

.container {
    position: relative;
    width: 400px;
    height: 80px;
}

#ball {
    width: 20px;
    height: 20px;
    margin: 15px;
    background: black;
}

.shell {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    transition: 0.2s linear;
}

.s1 {left: 0px;}
.s2 {left: 100px;}
.s3 {left: 200px;}

JavaScript

var pairs = ['1_2','1_3','2_3'];
var random = function( max ) {
    return Math.floor( Math.random() * (max) );
};
var interval;
var shuffle = function(){
    var r = random(3);
    var p1 = pairs[r].substr(0,1);
    var p2 = pairs[r].substr(2,1);
    var e1 = $('#s_'+p1);
    var e2 = $('#s_'+p2);
    var c1 = e1.attr('class');
    var c2 = e2.attr('class');
    e1.attr('class',c2);
    e2.attr('class',c1);
}

$(document).ready(function () {
    $('.shell').click(function(){
        $(this).find('#ball').show();
    });

    $('#randomize').click(function(e){
        e.preventDefault();
        $('#ball').hide();
        interval = setInterval(function(){
            shuffle();
        },400);
    });
    
    $('#stop').click(function(e){
        e.preventDefault();
        clearInterval(interval);
    });

});