JSFiddle - React, Tailwind, and code Playground

by grdhog

HTML

<button id="add">add new row</button>
    <table id="rows">
    </table>
    <!-- next line is to show console -->
    <div id="console-log"></div>

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

$(document).ready(function() { 
    
    //ignore this block - just helps shows console outout
    var consoleLine = "<p class=\"console-line\"></p>";
 
    console = {
        log: function (text) {
            $("#console-log").append($(consoleLine).html(text));
        }
    };
    // start here...
    
    get_rows();

    $('#add').click(function() {  
        // ajax call to server to add row
        console.log("add row");
        get_rows();
        return false;
    });

    function get_rows(){
        console.log("inside get_rows!");
        $("#rows").empty();
        // ajax call to return all rows
        for (i=0; i < 5;i++){
            var item = '<tr><td id="' + i + '" class="del_row">delete row ' + i + ' by clicking me!</td></tr>';
            $("#rows").append(item);             
        }

        $(document).on("click", ".del_row", function(){
            id = $(this).prop('id');
            console.log("delete row " + id);
            // ajax call to delete on server
            get_rows();                            
        });                                   
    }

}); // end ready