JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container" class="container"></div>
CSS
a {
display: block;
}
JavaScript
var dataSource = ["dog", "cat", "horse"];
var container = document.getElementById("container");
function index(el) {
var parent = el.parentNode;
for(i = 0;i < parent.childNodes.length;i++) {
if(parent.childNodes[i] == el) {
return i;
}
}
}
container.addEventListener("click", function (e) {
e.preventDefault();
console.log(e);
var idx = index(e.target);
alert("Index: " + idx + " value: " + dataSource[idx]);
});
for (i = 0; i < dataSource.length; i++) {
var data = dataSource[i];
var a = document.createElement("a");
var text = document.createTextNode(data);
a.href = "http://someurl.com?id=" + data;
a.appendChild(text);
container.appendChild(a);
}