JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1" style="background-color: red;">div1</div>
<div id="div2" style="background-color: blue;">div2</div>
<div id="div3" style="background-color: orange;">div3</div>
<div id="div4" style="background-color: green;">div4</div>

CSS

div {
    width:400px;
    height:100px;
    position: relative;
}
.ajaxLoading {
    background-color: pink;
    position: absolute;
    width:100px;
    height:50px;
    z-index: 4000;
}
.exposeMask {
    background-color:black;
    z-index: 2000;
    position:absolute;
    top: 0;
    left: 0;
    opacity=.5;
}

JavaScript

$(document).ready(function () {
    $('div').click(function () {
        if (!$(this).hasClass('loading')) {
            addLoadingDiv($(this));
        } else {
            finishedLoading($(this));
        }
    });
});

function addLoadingDiv(ctrl) {
    //uncomment for mask
    /*ctrl.append('<div class="exposeMask" style="width: ' + ctrl.width() + '; height: ' + ctrl.height() + '; opacity = .5;"></div>');*/

    var left = ((ctrl.width() / 2) - 50) + 'px';
    var top = ((ctrl.height() / 2) - 25) + 'px';
    loadingDiv = '<div class="ajaxLoading" style="top: ' + top + '; left: ' + left + ';">Loading...</div>';
    ctrl.addClass('loading');
    ctrl.append(loadingDiv);
}

function finishedLoading(ctrl) {
    ctrl.removeClass('loading').find('.ajaxLoading').remove();
    ctrl.find('.exposeMask').remove();
}