JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="display: none">
</div>

JavaScript

$(document).ready(function() {
    $("#outer").css("display","block");
    var current = 0;
    
    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();
    var $divs = $("#outer > div");
    $divs.hide();
    showNext(); 
});