JSFiddle - React, Tailwind, and code Playground

by silverlight

HTML

<a id="1" href="http://google.com"><div>d</div></a>
<a id="2" href="#2"><div>d</div></a>
<a id="3" href="#3"><div>d</div></a>
<a id="4" href="#4"><div>d</div></a>
<a id="5" href="#5"><div>d</div></a>
<br />
<br />
<div id="t1"></div>
<div id="t2"></div>
<br />
<a class="btnR" href="#">reset</a>

CSS

a{
    display:inline-block;
    width:54px;
    height:54px;
    background:lightgray;
}
a div{
    display:inline-block;
    width:32px;
    height:32px;
    margin:11px;
    background:white;
    text-align:center;
    line-height:32px;
}
#t1{background:yellow;}
#t2{background:orange;}
.btnR{
    background:purple;
    width:83px;
    height:24px;
    text-align:center;
    color:white;
}

JavaScript

$(document).ready(function(){
    var a=0;
    var d=0;
    $('a').on('click',function(e){
        console.log(e);
        a++;
        $('#t1').text('anchor clicked : [ '+e.target.id+' ] a=' + a);
        return false;
    });
    $('a div').on('click',function(e){
        d++;
        $('#t2').text('div clicked too ; d='+d);
        $(e.target.parentNode).click();      e.stopPropagation();
      e.preventDefault();
    });
    $('a.btnR').on('click',function(e){
        $('#t1').text('');
        $('#t2').text('');
        a=0;
        d=0;
    });
});