JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>

<button onclick="call()">Try it</button>

<script>
var myVar;

function call(){
myFunction('normal1','heading1','message1');
myFunction('normal2','heading2','message2');
myFunction('normal3','heading3','message3');
}

function myFunction(msgType,heading,message) {
console.log(!!document.getElementById("snackbarParent"),document.getElementById('snackbarParent'));
	if(document.getElementById("snackbarParent") == null)
    {
    	alertFunc(msgType,heading,message);
	}
    else{
    	setTimeout(function(){
        let parent = document.getElementById('snackbarParent');
            parent.parentNode.removeChild(parent);
        	alertFunc(msgType,heading,message);
        },3500);
    }
}

function alertFunc(msgType,heading,message) {

	let div = document.createElement('div');
        div.className = 'snackbarParent';
        div.id = "snackbarParent";
        div.innerHTML = '<div id="snackbar"><b style="color:' + msgType + '"> ' + heading + ' </b>' + message + '</div>';
        
        document.documentElement.appendChild(div);
        // Get the snackbar DIV
        let x = document.getElementById("snackbar");

        // Add the "show" class to DIV
        x.className = "show";
	setTimeout(function(){
    	x.className = x.className.replace("show", "");
      if(heading=='heading1')
      	alert('Should wait from now');
       else
        alert("Should wait for 3 sec and display "+heading+" "+message+" now!");
    }, 3000);
  
}
</script>

</body>