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');
    //Create an empty container
    var $trs = $();
    ['A', 'B'].forEach(function(index) {
        //Create TR and append TDs to it
        var $tr = $('<tr>', {class: 'table-row', id: 'table-row-id-'+index});
        $tr.append(
            $('<td />', {class: 'edit', id: 'edit-id-'+index, value: index}).
            add($('<td />', {class: 'name', id: 'name-id-'+index, text: 'Mr. '+index})).
            add($('<td />', {class: 'status', id: 'status-'+index, text: 'MSc'}))
        );
        //Add each tr to the container
        $trs = $trs.add($tr);
    });

    //Append all TRs to the container.
    container.append($trs);

    $(".table-body").on('click', 'tr', function() {
        alert( 'Clicked row '+ ($(this).index()+1) );
        //Use .text() as td doesn't have method .val()
        //Empty first time as the td has no text until clicked.
        alert( $(this).find('td:first').text() );
        $(this).find('td:first').text('clicked');
    });