JSFiddle - React, Tailwind, and code Playground

HTML

<table id='myTable'>
    <tr><td>Row</td><td>1</td></tr>
    <tr><td>Row</td><td>2</td></tr>
    <tr><td>Row</td><td id='addRow' class='noselect'>Add new row</td></tr>
</table>

CSS

#myTable, td{
    border: 1px solid grey;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
    cursor:pointer;
}

JavaScript

$("#addRow").on('click', function(e){
    $('#myTable').find('tr:last').before("<tr><td>Row</td><td>New row</td></tr>");
});

$("#myTable").on('click', 'tr',function(){
      alert('Clicked row '+ ($(this).index()+1) );
});