JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table" id="table-id">
    <thead>
        <tr class="table-header">
            <th class="edit">Edit</th>
            <th class="name">Name</th>
            <th class="status">Status</th>
        </tr>
    </thead>
    <tbody class="table-body">
    </tbody>
</table>

CSS

#table-id {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;
}

.table-header {
    background-color: yellow;
    border: 1px solid black;
}
.edit {
    width: 20px;
}
.name {
    width: 20px;
}
.status {
    width: 20px;
}
th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    padding-left: 20px;    
}

JavaScript

var container = $('.table-body');
['A', 'B'].forEach(function(index){
    $('<tr>', {class: 'table-row', id: 'table-row-id-'+index}).appendTo(container);
    $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).appendTo(container);
    $('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index}).appendTo(container);
    $('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}).appendTo(container);
    $('</tr>').appendTo(container);
});

$(".table-body").on('click', 'tr', function(){
	alert('Clicked row '+ ($(this).index()+1) );
    alert($(this).find('td:first').val());
    $(this).find('td:first').text('clicked');
});