JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="display: none">
<!--<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>->
</div>

JavaScript

$(document).ready(function() {
    $("#outer").css("display","block");
    var $divs = $("#outer > div").hide(),
        current = 0;
    
    $divs.eq(0).show();
    function loadContent() {
        for(var i=0; i<20; i++) {
            $("#outer").append("<div id='divs"+i+"'>test"+i+"</div>");
        }  
    }
    function showNext() {
        if (current < $divs.length - 1) {
            $divs.eq(current).delay(2000).fadeOut('fast', function() {
                current++;
                $divs.eq(current).fadeIn('fast');
                showNext();
            });
        }
    }
    loadContent();
    showNext();
    
    
    
});