JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.kansasoutlawwrestling.com/manager/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://www.kansasoutlawwrestling.com/manager/css/style.css">
<script src="http://www.kansasoutlawwrestling.com/manager/js/jconfirmaction.jquery.js"></script>
<h2>Web Site Templates</h2> 

<table id="templatesPageList" class="rounded-corner">

    <thead>
    
        <tr>
        
            <th scope="col" class="rounded-first"></th>
            <th scope="col" class="rounded">Description</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="5" class="rounded-foot-left"></td>
            <td class="rounded-foot-right">&nbsp;</td>

        </tr>
        
    </tfoot>
    
    <tbody>
            
        <tr><td><input type="checkbox" name="templates" value="1"/></td><td>Main Site Template</td><td>Jeff Davidson</td><td>July 27, 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="templates" value="2"/></td><td>Testing 2</td><td>Jeff Davidson</td><td>July 27, 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="templates" value="3"/></td><td>Testing 3</td><td>Jeff Davidson</td><td>July 27, 2011</td><td><a href="#"><img src="images/user_edit.png" class="edit" alt="" title="" border="0" id="3" /></a></td><td><a...

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 pageName = $('#pageName').val();    
    
    var oTable = $('#templatesPageList').dataTable( {
        "sDom": 'rti<"pagination"p>',
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers"
    });
    
    if(oTable.fnSettings().fnRecordsTotal() <= 10) {
        $('div.pagination').remove();
    } else {
        $('div.pagination').append();
    }
    if(oTable.fnSettings().fnRecordsTotal() == 0) {
        $('.bt_red').remove();
        $('.bt_blue').remove();
    }
    if(oTable.fnSettings().fnRecordsTotal() <= 10) {
        $('.bt_blue').remove();
    }

    $('.edit').click(function(e) {
        e.preventDefault();
        var templateID = $(this).attr('id');
         $('div.right_content').load('modules/forms/edit/templates.php?templateID=' + templateID);
    });
    
    var info = $('.dataTables_info');
    $('tfoot tr td.rounded-foot-left').append(info);
    
    $('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'))
           ...