JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<table>
    <tr>
        <td>Add element</td>
        <td id="add">Add task row</td>
    </tr>
</table>

<table>
    <tr class="header_row">
        <td>Header</td>
        <td>Row</td>
    </tr>
    <tr>
        <td>Test</td>
        <td>Element</td>
    </tr>
</table>

CSS

table { margin: 20px; width: 200px; }
#add { cursor: pointer; }

JavaScript

$('#add').on('click', function() {
    var clicked_item = this;
    var str = '<tr class="task_row"><td>data.name</td><td>data.description</td></tr>';
    $(str)
        .hide()
        .insertAfter($(clicked_item)
                         .parent()
                         .parent()
                         .parent()
                         .next()
                         .find('.header_row')
                     )
        .fadeIn("slow", function() { $(this).removeAttr('style'); });

});