JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="foo">
        <p>Div A</p>
    </div>
    
    <div class="foo">
        <p>Div B</p>
    </div>
    
    <div class="foo">
        <p>Div C</p>
    </div>
    
    <div class="foo">
        <p>Div D</p>
    </div>
    
    <div class="foo">
        <p>Div E</p>
    </div>
</div>

CSS

#container {
    outline:1px solid green;
    overflow:hidden;
    margin:10px;
}

.foo {
    outline:1px solid red;
    overflow:hidden;
    margin:5px;
}

.foo p {
    display:block;
    margin-left:5px;
}

JavaScript

$('.foo').hide();

var count = $('.foo').length;
console.log(count);

var currentItem = 0;

switchDiv = function() {
    if (currentItem == count - 1) {   
        $('.foo').eq(count - 1).hide();
        currentItem = 0;
        $('.foo').eq(0).fadeIn();
    }
    else {        
        $('.foo').eq(currentItem).hide();
        currentItem = currentItem + 1;
        $('.foo').eq(currentItem).fadeIn();
    }        
}

setInterval("switchDiv()", 2000 );