JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block" id="b5">
    b5 
    <span class="arr">&rarr;</span>
</div>

<div class="block" id="b4">
    <span class="arr">&larr;</span> 
    b4 
    <span class="arr">&rarr;</span>
</div>

<div class="block" id="b3">
    <span class="arr">&larr;</span> 
    b3 
    <span class="arr">&rarr;</span>
</div>

<div class="block" id="b2">
    <span class="arr">&larr;</span> 
    b2 
    <span class="arr">&rarr;</span>
</div>

<div class="block" id="b1">
    <span class="arr">&larr;</span> 
    b1 
</div>


<hr />
<span id="actionMsg">Press one of the buttons</span>
<hr />
<input type="button" id="backward" value="backward" class="actionButton" />
<input type="button" id="forward" value="forward" class="actionButton" />

CSS

div.block {
    position: relative;
    top: 5px;
    height: 80px;
    width: 100px;
    display: inline-block;
    line-height: 80px;
    font-weight: bold;
    background-color: #bf0000;
    text-align: center;
    color: white;
    font-family: arial;
    border: 2px solid white;
    border-radius: 5px;
}

#actionMsg {
    font-family: arial;
    text-align: center;
    width: 100%;
    display: block;
}

span.arr {
    font-size: 30px;
    font-weight: 600;
    font-family: sans-serif;
}

JavaScript

function Block () {
    this.id = null;
    this.elementRef = null;
    this.defaultMovingDistance = 100; /* hardcoded for our quick purposes matching our HTML example */
    this.backLink = null;
    this.nextLink  = null;
    this.setBackLink = function (bLink) {
        this.backLink = bLink;
    }
    
    //sets next link
    this.setNextLink = function (nLink) {
        this.nextLink = nLink;
    }
    
    //sets back link
    this.setElementRef = function (id) {
        this.elementRef = $('#' + id);
        this.id = id;
    }
    
    //move forward based on the position of the last link
    this.moveForward = function () {
         this.elementRef.animate(
            {
                left: "+=" + this.defaultMovingDistance + "px"
            },
            1000,
            "linear"
        );
        
        //there's something behind tell it to go forward!
        if (this.backLink !== null) {
            //just to show what we are about to do
            updateMessage(this.id + " will now pull " + this.backLink.id + " using our link");
            var that = this;
            setTimeout(function() {
                that.backLink.moveForward();
            }, 3000);
        } else {
            updateMessage("No more links to pull");
            $(".actionButton").removeAttr('disabled');
        }
    }
    
    //move backward based on the position of the last link
    this.moveBackward = function () {
        this.elementRef.animate(
            {
                left: "-=" + this.defaultMovingDistance + "px"
            },
            1000,
            "linear"
        );
        
        //there's something behind tell it to go forward!
        if (this.nextLink !== null) {
            //just to show what we are about to do
            updateMessage(this.id + " will now pull " + this.nextLink.id + " using our link");
            var that = this;
            setTimeout(function() {
                that.nextLink.moveBackward();
            },...