JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<button id="one" class="showAccount">Display Detail 1</button>
<button id="two" class="showAccount">Display Detail 2</button>
<button id="three" class="showAccount">Display Detail 3</button>
<div id="displayContent"></div>

CSS

button {
        margin: 5px 0;
        display: block;
    }

JavaScript

var displayContent = function(msg){
            $('#displayContent').append("<p>"+ msg + "</p>");
        };

var mockAjaxCall = function(urlname, to){
    return Promise.resolve(setTimeout(function(){displayContent(urlname + ' completed');}, to));
};

var q = [];

$('.showAccount').on('click', function(){
    var msg = $(this).attr('id');
    mockAjaxCall(msg, 3000).then(function(timeoutId) {
        var prev;
        if (q.length){
            prev = q.shift();
            displayContent(prev + ' Cancelled!');
            clearTimeout(prev);
        }
        q.unshift(timeoutId);
    });
});