JSFiddle - React, Tailwind, and code Playground

by Michael Underwood

HTML

<div id="parent1"></div>
<div id="parent2"></div>

JavaScript

function createCategory(parent) {
    $(parent).prepend('<div id="CategoryGroup-favourites" class="CategoryGroup"></div>');
    $('#CategoryGroup-favourites').append('<h2 class="H">Favourites</h2>')
                                .append('<div class="DataTableWrap"></div>');
    $('#CategoryGroup-favourites .DataTableWrap').append('<table class="DataTable CategoryTable"></table>');
    $('#CategoryGroup-favourites table').append('<thead></thead>')
                                        .append('<tbody></tbody>');
    $('#CategoryGroup-favourites thead').append('<tr></tr>');
    $('#CategoryGroup-favourites tr').append('<td class="CategoryName"></td>')
                                .append('<td class="BigCount CountDiscussions"></td>')
                                .append('<td class="BigCount CountComments"></td>')
                                .append('<td class="BlockColumn LatestPost"></td>');
}

function createCategoryNew(parent) {
    var newDivHtml = '\
<div id="CategoryGroup-favourites" class="CategoryGroup">\
    <h2 class="H">Favourites</h2>\
    <div class="DataTableWrap">\
        <table class="DataTable CategoryTable">\
            <thead>\
                <tr>\
                    <td class="CategoryName"></td>\
                    <td class="BigCount CountDiscussions"></td>\
                    <td class="BigCount CountComments"></td>\
                    <td class="BlockColumn LatestPost"></td>\
                </tr>\
            </thead>\
            <tbody></tbody>\
        </table>\
    </div>\
</div>';
    $(parent).prepend(newDivHtml);
}

$(document).ready(function () {
    createCategory('#parent1');
    createCategoryNew('#parent2');
});