JSFiddle - React, Tailwind, and code Playground

HTML

<div class="breadcrumb-trail" style="width: 100%; clear: both;">
    <div class="breadcrumbs">
        <div class="breadcrumb-cell clickable active">
            <div class="breadcrumb" data-id="memory">memory</div>
        </div>
        <div class="breadcrumb-cell">
            <div class="breadcrumb" data-id="attention">attention</div>
        </div>
        <div class="breadcrumb-cell">
            <div class="breadcrumb" data-id="speed">speed</div>
        </div>
        <div class="breadcrumb-cell">
            <div class="breadcrumb" data-id="flexibility">flexibility</div>
        </div>
    </div>
</div>
<div style="height: 60px;"></div>
<div style="width: 40%; clear: both;">
    <div class="item active" id="memory">memory <span>active</span>
    </div>
    <div class="item" id="attention">attention <span>active</span>
    </div>
    <div class="item" id="speed">speed <span>active</span>
    </div>
    <div class="item" id="flexibility">flexibility <span>active</span>
    </div>
</div>
<div id="next-button">NEXT</div>

CSS

.clickable {cursor: pointer; border: 1px solid blue !important;}
.breadcrumb-trail .breadcrumbs .breadcrumb-cell {
    height: 22px;
    margin: 0 20px;
    padding: 0;
    position: relative;
    float: left;
    border: 1px solid green;
    padding: 4px;

}
.breadcrumb-trail .breadcrumbs .breadcrumb-cell .clickable:hover {
    height: 22px;
    margin: 0 20px;
    padding: 0;
    position: relative;
    float: left;
    border: 1px solid green;
    padding: 4px;
    cursor: pointer;
    background: #eee;
    color: #fff;
}
#next-button {
    cursor: pointer;
    margin-top: 30px;
    border: 1px solid;
    padding: 5px;
    width: 80px;
    text-align: center;
}
.active {
    color: red;
    border: 1px solid;
    padding: 10px;
}
.active span {
    display: block
}
span {
    display: none;
    float: right;
}
.last {
    color: green;
    border: 1px solid green;
}

JavaScript

$("#next-button").on('click', function () {
    var nextItem  = $('.active').removeClass('active').next(),
        breadItem = $('.clickable').next();

    if (!nextItem.length) {
        nextItem = $('.item').first();
        $('.item').last().addClass('last');
    }
    nextItem.addClass('active');
    breadItem.addClass('clickable');

});


$(".clickable .breadcrumb").on('click', function () {
    $('.active').removeClass('active');      
    var theID = $(this).data("id");
    $("#" + theID).addClass('active');
    

 
});