JSFiddle - React, Tailwind, and code Playground

HTML

<div class="selection">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="button" id="go">Go</div>
<div class="button" id="stop">Stop</div>

CSS

.selection {
    background-color: lightblue;
    border: 2px solid black;
    margin: 25px;
    padding: 5px;
}
.box {
    background-color: blue;
    height: 25px;
    width: 25px;
    padding: 2px;
}
.new {
    background-color: red;
}
.button {
    width: 100px;
    border: 2px solid rgba(0, 0, 0, .5);
    background-color: grey;
    margin: 25px;
    text-align: center;
}
.button:hover {
    background-color: darkgray;
}
.button:active {
    background-color: white;
}

JavaScript

function goClasses(item, container) {
    $(container).removeClass('stopped');
    $(item).addClass('new');
}

function stopClasses(item, container) {
    $(item).removeClass('new');
    $(container).addClass('stopped');
}


$('#go').mousedown(function () {
    $('.box').each(function(i){
        var item = $(this);
        var container = $('.selection');
        setTimeout(function () {
            goClasses(item, container);
        }, 500 * i);
        if ($(container).hasClass('stopped')) {
            //clearTimeout(); /* this doesn't appear to do anything */
            //return false; /* this stops the 'go' button from working properly when clicked again after the 'stop' button has clicked */
        }
    });
});

$('#stop').mousedown(function () {
    $('.box').each(function (i) {
        var item = $(this);
        var container = $('.selection');
        stopClasses(item, container);
    });
});