JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.kansasoutlawwrestling.com/manager/css/style.css">
<script src="http://webstuffshare.com/demo/jConfirmAction/jconfirmaction.jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<h2>Content Pages</h2> 

<table id="contentPagesPageList" class="rounded-corner">
    
    <thead>
        
        <tr>
            
            <th scope="col" class="rounded-first"></th>
            <th scope="col" class="rounded">Description</th>
            <th scope="col" class="rounded">Short Name</th>
            <th scope="col" class="rounded">Creator</th>
            <th scope="col" class="rounded">Date Created</th>
            <th scope="col" class="rounded">Edit</th>
            <th scope="col" class="rounded-last">Delete</th>
            
        </tr>
        
    </thead>
    
    <tfoot>
        
        <tr>
            
            <td colspan="6" class="rounded-foot-left"></td>
            <td class="rounded-foot-right">&nbsp;</td>
            
        </tr>
        
    </tfoot>
    
    <tbody>
        
        <tr><td><input type="checkbox" name="contentpages" value="1"/></td><td>Roster</td><td>roster</td><td>Jeff Davidson</td><td>July 18, 2011</td><td><a href="#"><img src="images/user_edit.png" class="edit" alt="" title="" border="0" id="1" /></a></td><td><a href="#" class="ask"><img src="images/trash.png" class="delete" alt="" title="" border="0" id="1" /></a></td></tr><tr><td><input type="checkbox" name="contentpages" value="2"/></td><td>Title History</td><td>titlehistory</td><td>Jeff Davidson</td><td>July 18, 2011</td><td><a href="#"><img src="images/user_edit.png" class="edit" alt="" title="" border="0" id="2" /></a></td><td><a href="#" class="ask"><img src="images/trash.png" class="delete" alt="" title="" border="0" id="2" /></a></td></tr><tr><td><input type="checkbox" name="contentpages" value="3"/></td><td>Homepage</td><td>index</td><td>Jeff...

JavaScript

$.fn.dataTableExt.oApi.fnLengthChange = function ( oSettings, iDisplay )
{
    oSettings._iDisplayLength = iDisplay;
    oSettings.oApi._fnCalculateEnd( oSettings );
    
    /* If we have space to show extra rows (backing up from the end point - then do so */
    if ( oSettings._iDisplayEnd == oSettings.aiDisplay.length )
    {
        oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength;
        if ( oSettings._iDisplayStart < 0 )
        {
            oSettings._iDisplayStart = 0;
        }
    }
    
    if ( oSettings._iDisplayLength == -1 )
    {
        oSettings._iDisplayStart = 0;
    }
    
    oSettings.oApi._fnDraw( oSettings );
    
    $('select', oSettings.oFeatures.l).val( iDisplay );
}


$(document).ready(function() {
    var oTable = $('#contentPagesPageList').dataTable({
        "sDom": 'rti<"pagination"p>',
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers"
    });
    var info = $('.dataTables_info');
    $('tfoot tr td.rounded-foot-left').append(info);
    $('.edit').click(function(e) {
        e.preventDefault();
        var contentPageID = $(this).attr('id');
        $('div.right_content').load('modules/forms/edit/contentpages.php?contentPageID=' + contentPageID);
    });
    $('a.bt_green').click(function(e) {
        e.preventDefault();
        $('div.right_content').load('modules/forms/addnew/' + $(this).attr('id'));
    });
    $('table tr').click(function() {
        checkBox = $(this).children('td').children('input[type=checkbox]');
        if (checkBox.attr('checked')) checkBox.removeAttr('checked');
        else checkBox.attr('checked', 'checked');
    });
    $('.ask').jConfirmAction({
        question: "Are you sure you want to delete the selected row?",
        yesAnswer: "Yes",
        cancelAnswer: "No",
        onYes: function(evt) {
            contentpages(evt.target);
        }
    });
    $('.ask2').jConfirmAction({
        question: "Are you sure you want to delete all...