JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<p id="show">start</p>
<table id="test"></table>

JavaScript

$(document).ready(function() {
    var htm = "<tr><td>1</td><td>1a</td><td>1b</td></tr><tr><td>2</td><td>2a</td><td>2b</td></tr><tr><td>3</td><td>3a</td><td>3b</td></tr>";
    $("#test").html(htm);
    // here we expand the table
    $("#show").click(function() {
        var htm = "<tr><td>4</td><td>4a</td><td>4b</td></tr><tr><td>5</td><td>5a</td><td>5b</td></tr><tr><td>6</td><td>6a</td><td>6b</td></tr>";
        $("#test").html(htm);
    });
    // --------------      this part onle works for the first 3 rows
    $("#test").on('click', 'tr', function() {
        var ind = $("#test tr").index(this);
        var x = $(this).children(':nth-child(2)').text();
        alert(ind + "x: " + x);
    });
});