How to add class to the next DIV and fade out the current with dynamic number of items - multiple instances

I was wondering if there was a way to create a scalable (mainly) CSS slideshow for text divs - no images.

I have this current HTML structure:

<div class="mb-panel-container cf">
    <div class="mb-panel-section mb-slider">
        <div class="mb-panel active">
            <h1>1.1</h1>
            <p>slide 1.1</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>1.2</h1>
            <p>slide 1.2</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>1.3</h1>
            <p>slide 1.3</p>
            <p class="datetime"></p>
        </div>
    </div>
    <div class="mb-panel-section mb-slider">
        <div class="mb-panel active">
            <h1>2.1</h1>
            <p>slide 2.1</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>2.2</h1>
            <p>slide 2.2</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>2.3</h1>
            <p>slide 2.3</p>
            <p class="datetime"></p>
        </div>
    </div>
    <div class="mb-panel-section mb-slider">
        <div class="mb-panel active">
            <h1>3.1</h1>
            <p>slide 3.1</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>3.2</h1>
            <p>slide 3.2</p>
            <p class="datetime"></p>
        </div>
        <div class="mb-panel">
            <h1>3.3</h1>
            <p>slide 3.3</p>
            <p class="datetime"></p>
        </div>
    </div>
</div>

But the slides will vary in the number of items depending on how many notices there have been made.

I have the current CSS:

.mb-panel-container {
    width: 100vw;
    margin-top: 1px;
    text-align: center;
}
.mb-panel-section {
    width: calc( ( 100vw - 3px ) / 3 );
    float: left;
    margin-right: 1px;
}
.mb-panel-section.mb-slider {
    height: calc( 100vh - (4em + 1.75em + 2em + 5em) );
}
.mb-panel-section .mb-panel {
    line-height: 1em;
    padding: 1em;
    height: 100%;
    width: 100%;
}
.mb-panel-section.mb-slider .mb-panel {
    padding: 5em 2em 3em;
    opacity: 0;
    transition: opacity 2s linear;
}
.mb-panel-container .mb-panel-section .mb-panel.active { opacity: 1; }

And the Javascript:

$(document).ready(function() {
    var items = $('.mb-panel');
    var currentItem = items.filter('.active');
    window.setInterval( function(){
        var nextItem = currentItem.next();
        currentItem.removeClass('active');
        if ( nextItem.length ) {
            currentItem = nextItem.addClass('active');
        } else {
            // If you want it to loop around
            currentItem = items.first().addClass('active');
        }
    }, 5000);
}); 

However, while it cycles through the first panel indefinitely, the other two won't loop, but end on the final panel.

I'm not entirely sure where to alter the code, and not wanting to duplicate the JS code to for each panel section.