JSFiddle - React, Tailwind, and code Playground

HTML

<script src="bootstrap"></script>
<table class="table table-hover">                                       
    <thead>
        <tr>
            <th>#</th>
            <th>Username</th>
            <th>Password</th>
            <th>Role</th>
            <th>Edit</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>ID</td>
            <td>Username </td>
            <td>Password </td>
            <td>Role </td>

              <td>                                                        
 
 <button type="button" class="updateUser btn btn-primary btn-xs" data-userId="<?php echo $id; ?>">
EDIT BUTTON
        </button>
          </td>
        </tr>
    </tbody>                                        
</table>

JavaScript

$(document).on("click", ".updateUser", function() {
   $(this).closest('tr').find('td').each(function() {
     var html = $(this).html();
     var input = $('<input type="text" />');
     input.val(html);
     $(this).html(input);
   });

 });