JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clicks"></div>

CSS

div {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    position: absolute;
}
.a {
    left: 0;
    top: 0;
}
.b {
    position: absolute;
    left: 10px;
    top: 10px;
}
.c {
    position: absolute;
    left: 20px;
    top: 20px;
}
#clicks {
    margin-left: 200px;
    font-weight: bold;
}
.hided {
    display:none
}

JavaScript

$('body').append('<div class="a"/>').append('<div class="b"/>').append('<div class="c"/>');

var clicks = 0,cursorPosition={};

$('div').click(function (e) {
    if(typeof cursorPosition.X === 'undefined') {
         cursorPosition.X = e.pageX;
        cursorPosition.Y = e.pageY;
    }
    clicks++;
    $(this).css('border','1px solid red');
    e.stopPropagation();
    $(this).addClass('hided');
    var underELEM = document.elementFromPoint(cursorPosition.X, cursorPosition.Y);
    if (underELEM.nodeName.toUpperCase() === "DIV") $(underELEM).click();
    else {
        $('#clicks').html("Clicks: " + clicks);
        $('.hided').removeClass('hided');
        clicks=0;
        cursorPosition = {};
    }
});