JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<div class="wrapper">
    <div class="button">Start</div>
    <div class="ajax-status"></div>
    <br />
</div>
<div class="wrapper load1">

</div>
<div class="wrapper load load2" data-content="Test">
                
</div>
<div class="wrapper load load3" data-content="Test">
                
</div>
<div class="wrapper load load4" data-content="Test">
                
</div>

CSS

.wrapper {
    margin-bottom:10px;
    min-height:30px;
    border:1px solid blue;
}

p{
    background:yellow;
    padding:10px;
}

p.loaded {
    background: green;
}

.ajax-status {
    height:30px;
}

.ajax-status p {
    float:left;
}

.button{
    width:100px;
    height:30px;
    background:red;
}

JavaScript

$(document).ready(function(){
});

$('.button').click(function(){
    $('.load1').load('/echo/html/', { html: '<p class="loaded">Hello 1!</p>' });
});

$(document).ajaxStop(function() {
    $('.ajax-status').append($('<p>Ajax Stop</p>'));
    loadSecondContent();
});

function loadSecondContent(){
    if(($('.wrapper').length -1) > $('.wrapper .loaded').length){
        $('[data-content]').each(function(){
            var $this = $(this);
            if ($this.find('p').length == 0) {
                var menu_name = $this.data('content');
                console.log('Menu: ' + menu_name);
                var content = menu_name + '.html';
                // var content = $.get(url);
                // alert(content);
                $this.load('/echo/html/', {html: '<p class="loaded">' + content + '</p>'});
            };
        });
    }
}