JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<table border="2" bgcolor="cccccc" cellpadding="3">
    <tr>
        <td>Click me to add another!</td>        
    </tr>
</table>

JavaScript

// Give us text to put inside our new text box
var height = "Box #";
// using this to track the number of boxes we've added
var boxNo = 1;

// now, whenever someone clicks on the 
// td element, trigger the click handler
$("td").click(function() {
    // 1. create a TD, 
    // 2. insert it after this in the DOM
    // 3. set its text to height plus the boxNo (incremented by 1)
    // 4. and set the border of the TD to thin solid red
    $('<td/>').insertAfter($(this)).text(height + boxNo++).css('border', 'thin solid red');
});