JSFiddle - React, Tailwind, and code Playground

HTML

<table class="table table-striped table-bordered table-hover" id="categories_table">
                <thead>
                <tr role="row" class="heading">
                    <th width="1%"># ID</th>
                    <th>Name</th>
                    <th width="20%">Action</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                   <td class="category-id">1</td>
                   <td class="category-name">Category 1</td>
                   <td><button class="edit_category">Edit</button></td>
                <tr>
                <tr>
                   <td class="category-id">2</td>
                   <td class="category-name">Category 2</td>
                   <td><button class="edit_category">Edit</button></td>
                <tr>
                </tbody>
            </table>

JavaScript

$('document').ready(function() {
    $('.edit_category').click(function() {
        $tr = $(this).closest('tr');
        alert("You want to edit: Category with ID " + $('.category-id', $tr).text() + " & Name: " + $('.category-name', $tr).text());        
    });
});