JSFiddle - React, Tailwind, and code Playground

HTML

<p><button id="add">Add Item</button></p>
<i>d1</i><div class="d1"></div>
<i>d2</i><div class="d2"></div>
<i>d3</i><div class="d3"></div>
<i>d4</i><div class="d4"></div>
<i>d5</i><div class="d5"></div>

CSS

div{
    width: 100px;
    height: 100px;
    background-color: #555;
    margin: 10px;
    float: left;
}
i{
float: left;
}

JavaScript

$("#add").click(function(){
    $("div").append('<span class="t1">Test1</span>');
    $(".d5").append('<a href="javascript:;">test2</a>')
});

var handle =  function(){
    alert("Event Active!");
};

$("body").on("click", ".t1", handle);

$(".d2").click(function () {});

$(".d3").on("click", ".t1", handle);

$("body").get(0).addEventListener("click", function(e){ alert(e.target)}, true);