JSFiddle - React, Tailwind, and code Playground

HTML

<div class="noti_box"><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>

<div class="noti_box"><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>

<div class="noti_box"><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>

<div class="noti_box"><div class="boxclose" id="boxclose" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">&#10006;</div></div>

CSS

.noti_box{
    width:100px;
    height;40px;
    border:1px solid #000;
    display:none;
}

JavaScript

$(document).ready(function(){
    var animations = [];
    

    $('.noti_box').each(function(i) {
        animations.push(
           $(this).hide().delay(i * 1000).fadeIn(1500).promise()
        );
    });

    $.when.apply($, animations).done(function () {
        time=setInterval(function(){
        if ( $('.noti_box:visible').length === 0 ) {
            $(".advert").fadeIn("slow");
        } },200);
    });
});