JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" width="100%">
<thead>
<tr>
  <th>#</th>
  <th>Id</th>
  <th>Name</th>
  <th>Action</th>
</tr>
</thead>

<tbody>
</tbody>
</table>

JavaScript

$(document).ready(function () {
        var jsonData = [{
            id: 'A01',
            name: 'Fadhly'
        }, {
            id: 'A02',
            name: 'Permata'
        }, {
            id: 'A03',
            name: 'Haura'
        }, {
            id: 'A04',
            name: 'Aira'
        }];

        $.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><button class="delete" data-key="' + (key + 1) + '"><a href="#menu1">Edit</a></button></td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });
		
		 $('tbody .delete a').click(function(){
			 alert($(this).closest('tr').find('td:first-child').text());
		 });
});