JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theParent" style="padding:10px;">

    <a href="#">Clicked 1</a>
    <a href="#">Clicked 2</a>
    <a href="#">Clicked 3</a>
    <a href="#">Clicked 4</a>
    <a href="#">Clicked 5</a>

</div>

CSS

#theParent {
    background-color; #FFDDDD;
    padding: 10px;
    
}

JavaScript

$(function ()
  {
      $('#theParent').click(captureEvent);
      RecurseAddHoverEvent ($('#theParent'), captureEvent);
  });

function RecurseAddHoverEvent (current, EventFunction)
{
    current.hover(EventFunction);//.css('border', '1px solid red');
    current.children().each(function ()
                         {
                             RecurseAddHoverEvent ($(this), EventFunction);
                         });
}

var captureEvent = function(e)
{
    console.log(e.target);
    //alert($(e.currentTarget).html());
    alert(e.currentTarget.html());
};