JSFiddle - React, Tailwind, and code Playground

HTML

<table id="main">
    <tbody>
        <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
            <td width="25px"><a class="docEditLink docAdminFormSubmit" name="38" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="38" /></td>
            <td>Document A</td>
            <td>Description of Document A</td>  
        </tr>
        <tr class="docClassesRow noClasses">
            <td colspan="4">
                <strong>No classes are currently associated with this document.</strong>
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
            <td width="25px"><a class="docEditLink docAdminFormSubmit" name="35" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="35" /></td>
            <td>Document B</td>
            <td>Description of Document B</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="33-35" /></td>
            <td width="200px">CLASS111</td>
            <td width="600px">Description of CLASS101</td>
        </tr>
        <tr class="docClassesRow">
            <td></td>
            <td width="100px" align="right"><input type="checkbox" class="chkRemoveClasses" name="removeClasses[]" value="45-35" /></td>
            <td width="200px">CLASS333</td>
            <td width="600px">Description of CLASS333</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="docRow" bgcolor="#EFE5D3" style="font-weight: bold; font-size: 1.1em;">
            <td width="25px"><a class="docEditLink docAdminFormSubmit" name="46" href="#">Edit</a></td>
            <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]"...

JavaScript

var makeDocRow = function(name, description) {
    return $('<tbody><tr class="docRow" bgcolor="#AFE5D3" style="font-weight: bold; font-size: 1.1em;">\
        <td width="25px"><a class="docEditLink docAdminFormSubmit" name="whatever" href="#">Edit</a></td>\
        <td width="20px"><input type="checkbox" class="chkDeleteDocs" name="removeDocs[]" value="whatever" /></td>\
        <td>' + name + '</td>\
        <td>' + description + '</td>\
    </tr></tbody>');
};

var addDocRow = function(name, description) {
    var counter = 0;
    // assumes it's already sorted
    $('#main').find('tr.docRow').each(function() {
        counter++;
        if ($(this).find('td:eq(2)').html() >= name) {
            $(this).parent().before(makeDocRow(name, description));
            return false;
        }
        if ($(this).closest('table').find('tr.docRow').length === counter) { // last row
            $(this).parent().after(makeDocRow(name, description));
        }
    });
};

// to add a row
addDocRow('Document E', 'Document C tyuyt Description Goes Here');
addDocRow('Document G', 'Document G Description Goes Here');
addDocRow('Document Z', 'Document Z Description Goes Here');