JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<div class="page-body">
    
    <table class="alerts tablesorter" id="accTable" cellspacing="0">
        <thead> 
            <tr class="header">
                <th class="activity-header"> N      </th>
                <th class="activity-header"> Signed </th>
                <th class="activity-header"></th>
            </tr>
        </thead> 
        
        <tbody>      
            <form action="" method="post">
                <input name="anchor" value="2548" type="hidden">
                <tr class="row">
                    <td class="activity-data">2548</td>
                    <td class="checkbox"> <span>1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"><a href="javascript:addRemove('2548');" id ="simpleClick">Details</a> <input value="Save" type="submit"></td>
                    
                </tr>
            </form>
            
            <form action="" method="post">
                
                <input name="anchor" value="7249" type="hidden">
                <tr class="row">
                    <td class="activity-data">7249</td>
                    <td class="checkbox"> <span>0</span> <input name="signed" type="checkbox"  > </td>
                    <td class="edit-column"><a href="javascript:addRemove('7249');">Details</a> <input value="Save" type="submit"></td>
                </tr>
            </form>
            
            <form action="" method="post">
                <input name="anchor" value="49914" type="hidden">
                
                <tr class="row">
                    <td class="activity-data">4991</td>
                    <td class="checkbox"> <span>1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"><a href="javascript:addRemove('49914');">Details</a> <input value="Save" type="submit"></td>
                </tr>
      ...

CSS

body { background-color: white; color: black; font-family: arial,sans-serif; margin: 4px 8px; }

div.page-body { padding: 0pt 1em; display: table; }

table.alerts { border-collapse: separate; border-spacing: 0pt; padding-top: 0.6em; }

tr.header { background-color: rgb(235, 239, 249); }

th.activity-header { text-align: left; font-weight: normal; padding: 0.4em 1em 0.4em 0.3em; }

td.activity-data { padding: 0.4em 1em 0.4em 0.3em; min-width: 10em; }

td.checkbox, tr.edit-row td.checkbox { min-width: 1em; max-width: 3em; padding: 0.2em 0.3em; }

td.edit-column, tr.edit-row td.edit-column { min-width: 5em; text-align: right; white-space: nowrap; padding-right: 0.6em; }

tr.edit-row td {padding: 0;padding-right: 1em;padding-left: 0.3em;background-color: #fff8e7;border-top: 0.3em solid #fff8e7;border-bottom: 0.2em solid #fff8e7; }

tr.edit-row td.edit-column input {margin-right: 0.5em;}

tr.edit-row td.edit-column a {color: #4272db;text-decoration: none;}

tr.row { padding-top: 1.3em; }
tr.row:hover { background-color: rgb(235, 239, 249); }

JavaScript

$(document).ready(function() {
    $("#accTable").tablesorter();

    $('#accTable input:checkbox').click(function() {
        var order = this.checked ? '1' : '0';
        $(this).prev().html(order);

        $(this).parents("table").trigger("update");
    });
});

$("#simpleClick").click(function() {
         alert($(this));
});

// sends the form content to server side, and stay on page
$('form').live('submit', function() {

    // don't redirect
    return false;
});

/*function addRemove(u) {
  alert(u);
}*/