JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.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" id="2548">
                    <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');">Details</a> <input value="Save" type="submit"></td>
                    
                </tr>
            </form>
            
            <form action="" method="post">
                
                <input name="anchor" value="7249" type="hidden">
                <tr class="row" id="7249">
                    <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" id="49914">
                    <td class="activity-data">4991</td>
                    <td class="checkbox"> <span>1</span> <input name="signed" type="checkbox" checked > </td>
                    <td class="edit-column"><a...

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); }



table#actTable {
    background-color: red;
}

#ddd {
    colspan="3";
}

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");
    });

});

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

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



function addRemove(id) {

    if ($('#details_' + id).size() == 0) {

        var dat = [
            {
            ID: "The Red Violin",
            FROM: "1998"},
        {
            ID: "Eyes Wide Shut",
            FROM: "1999"},
        {
            ID: "The Inheritance",
            FROM: "1976"}
        ];

        var markup = "<tr> <td>${ID}</td> <td>${FROM}</td> </tr>";

        // Compile the markup as a named template
        $.template("actTemplate", markup);

        var wrapper = $('<tr id="details_' + id + '"><td id="ddd"><table id="actTable"></table></td></tr>');

        var wrapperTable = wrapper.find('table');
        $.tmpl("actTemplate", dat).appendTo(wrapperTable);

        wrapper.insertAfter('#' + id);

    } else {
        $('#details_' + id).remove();
    }

}