JSFiddle - React, Tailwind, and code Playground

HTML

<table id="the-table"></table>
<a href="#" id="adder">Click to add another row</a>

JavaScript

window.addEventListener('load', function () {
    // This won't have any affect; no `a` elements exist at the time this is called
    var elements = document.querySelectorAll('#the-table a');
    
    for (var i=0;i<elements.length;i++) {
        elements[i].addEventListener('click', function (e) {
            alert('You clicked row #' + this.parentNode.previousSibling.innerText);
        }, false);
    };
    
    alert('Event handler bound to ' + elements.length + ' elements');
    
    // Add an event handler to add elements when the button is clicked
    document.querySelector('#adder').addEventListener('click', function(e) {
        var numberOfRows = document.querySelectorAll('#the-table tr').length;
        
        document.querySelector('#the-table').innerHTML += '<tr><td>' + numberOfRows + '</td><td><a href="#">Click Here</a></td></tr>';
    
        e.preventDefault();
    }, false);
});