JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<a href=# " id="clickMe">Click Me to add a new Div</a>
<div id="elementHolder">
<div id="webThumb5">
<p>Test1 <a href="# " class="del_button " role="button ">Delete</a></p>
</div>
<div id="webThumb6">
<p>Test2 <a href="# " class="del_button " role="button ">Delete</a></p>
</div>
<div id="webThumb7">
<p>Test3 <a href="# " class="del_button " role="button ">Delete</a></p>
</div>
</div>
<div id="divTemplate" style="display:none ">
<p>Test <a href="# " class="del_button " role="button ">Delete</a></p>
</div>
</body>
CSS
#elementHolder div {
border: 1px solid black;
display:inline-block;
padding: 0.5em;
margin: 0.2em;
}
JavaScript
var counter = 100;
$(document).ready(function () {
$("#elementHolder").on("click", "a.del_button", function (event) {
event.preventDefault();
var parentDiv = $(event.target).parent().parent();
alert("Id: " + parentDiv.attr('id'));
});
$("#clickMe").click(function (event) {
counter += 1;
var newId = "webThumb" + counter;
var newDiv = $("#divTemplate").clone(true, true);
newDiv.attr("id", newId).prependTo("#elementHolder");
newDiv.fadeIn(500);
});
});