JSFiddle - React, Tailwind, and code Playground

by Ehsan Sajjad

HTML

<table class="table_to_fill" id="table_id">
        <thead>
                <tr>
                    <th> title 1 </th>
                    <th> title 2 </th>
                </tr>
        </thead>
        <tbody>

            <tr>
                   <td>old row 1</td>
                   <td>old row 1</td>
            </tr>
            <tr>
                   <td>old row 2</td>
                   <td>old row 1</td>
            </tr>

        </tbody>
</table>
<button id="add_row_button">Add</button>

CSS

.table_to_fill tr:hover, .table_to_fill tr.selected {
background-color: #1E90FF;
color : #fff;
font-weight : bold;}

JavaScript

$(".table_to_fill").on('click','tr',function(){
$(this).addClass("selected").siblings().removeClass("selected");
});

//to add rows
$("#add_row_button").click(function(){
$('#table_id tr:last').after('<tr><td>new row</td><td>new row</td></tr>');
});