JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<button>add</button>
<p class="output"></p>

JavaScript

var count = 1;
var popupQueue = [];

$('button').on('click', function() {
	addAppointment();
});

function addAppointment() {
	popupQueue.push('appointment'+count);
    count++;
    if (popupQueue.length === 1) {
	    updatePopupQue();
    }   
}


function updatePopupQue() {
	
    console.log('updatePopupQue ' + popupQueue);

	// show.
  	$('p.output').text(popupQueue[0]);

    setTimeout(function(){
	    console.log('done');
       
        // hide
        $('p.output').empty();
      
        popupQueue.shift();   
        console.log(popupQueue.length);
        if (popupQueue.length > 0) {
            updatePopupQue();
        }   
    }, 2500);
    
	
};