JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
    </head>
    <body>
        <table style="padding-right: 5px">    
        </table>
    </body>
</html>

JavaScript

function add() {
    var elem = $("<tr><td>first</td><td>second </td><td>third </td></tr>");
    $("table").append(elem);
    
    // Expected: Clicking any item in the first column fires the event
    // Actual: Only clicking the first row in the first column fires the event
    $(elem).delegate("td:first", "click", function() {
        alert("First Clicked");
    });
    
    // Expected: Clicking any item in the second column fires the event
    // Actual: Only clicking the first row in the second column fires the event
    $(elem).delegate("td:eq(1)", "click", function() {
        alert("Second Clicked");
    });
    
    // Expected: Clicking any third column item would fire the function
    // Actual: Event only fires when clicking the column in the last row ONLY
    $(elem).delegate("td:last", "click", function() {
        alert("Last Clicked");
    });
}

$(function() {
    add();
    add();
    add();
    add();
});