JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>
<button id="/one/api" class="showAccount">Display Detail 1</button>
<button id="/two/api" class="showAccount">Display Detail 2</button>
<button id="/three/api" class="showAccount">Display Detail 3</button>
<div id="displayContent"></div>

CSS

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

JavaScript

$.mockjax({
  url: "/one/api",
  // Simulate a network latency of 750ms
  responseTime: 1050,
  responseText: "A text response from the server1"
});

$.mockjax({
  url: "/two/api",
  // Simulate a network latency of 750ms
  responseTime: 1050,
  responseText: "A text response from the server2"
});

$.mockjax({
  url: "/three/api",
  // Simulate a network latency of 750ms
  responseTime: 1050,
  responseText: "A text response from the server3"
});


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

var mockAjaxCall = function(urlname){
    return Promise.resolve(function(){
        return $.ajax({
            url: urlname
        });
    });
};

var q = [];

$('.showAccount').on('click', function(){
    var urlname = $(this).attr('id');
    mockAjaxCall(urlname).then(function(f) {
        var p;
        if (q.length){
         q.shift().abort();   
        }
        p = f();
        q.unshift(p);
        console.log(q);
        p.done(function(response){
            console.log(response);
            displayContent(response);
            q.shift();
            console.log(q);
        });
    });
});