JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <aside></aside>
    <article>
        <ul>
            <li>Should</li>
            <li>Be</li>
            <li>Like</li>
            <li>This</li>
        </ul>
    </article>
</body>

CSS

ul li {
    color: green;
}
li {
    color: red;
}

JavaScript

$(document).ready(function () {
    // establish example JSON object
    var $aside = $('aside');
    var JSON = {
        "M": [{
            "category": "One"
        }, {
            "category": "Two"
        }]
    };

    //                                                    |
    // here I open up the unordered list before my $.each V
    $aside.append("<h1>Catalog</h1><h2>Manufacturing</h2><ul>");
    $.each(JSON.M, function (i, row) {
        $aside.append("<li><a>" + row.category + "</li></a>");
    });
    // now my $.each is over, and I'd like to close my ul tag
    $aside.append("</ul");
});

/* if the </ul> was appended after the $.each, then the <li><a>'s would have inherited their intended style, green. Of course, the reason this bugs me is not style, but the fact I want to append in the order I type out. The JSON object will have several arrays in it, not just MFG, and I want to be sure the $.each's fire off sequentially, with titles appearing between and not all the titles and all the <ul>'s coming before an unorganized block of <li>'s */