JSFiddle - React, Tailwind, and code Playground
HTML
<p><a onclick="addLoaded();" href="javascript:;">load stuff!</a></p>
<div id="container"></div>
CSS
.button {
padding: 0.25em 0.5em;
border: thin solid green;
}
JavaScript
var loadedData = [
{ label:"apple", content:"green and round" },
{ label:"blackberry", content:"small black or blue" },
{ label:"pineapple", content:"weird stuff.. difficult to explain the shape" }
];
function addLoaded() {
for(let i = 0; i < loadedData.length; i++) // try var here: it won't work
jQuery("#container").append("<a class='button'>"+loadedData[i].label+"</a>")
.children().last() // now let's attach a handler to the button which is a child
.on("click",function() { alert(loadedData[i].content); });
}