JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="content" rows="10" cols="30"><h1>This is an h1</h1>
<p>Bla bla bla bla bla bla</p>
<h2>This is an h2</h2>
<p>Bla bla bla bla bla bla</p>
<h3>This is an h3</h3>
<p>Bla bla bla bla bla bla</p>
</textarea>

<iframe id="iframe-toc"></iframe>

CSS

h1, h2, h3, h4, h5 { font-weight: bold; }

JavaScript

function myQuickTOC() {
    var body = $('#content').val();
    var headers = $(body).filter('h1, h2, h3, h4, h5, h6');
    var toc = $('<ul></ul>');

    // Why don't the headers get wrapped in <li> tags?
    // The goal: <li class="toc_h1">This is an h1</li><li class "toc_h2...
    // What I get now: <h1>This is an h1</h1><h2>...
    
    headers.each(function(i) {
        $(this).wrap('<li class="toc_' + this.nodeName.toLowerCase() + '"></li>').parent().appendTo(toc);
    });

    toc = toc.clone().wrap('<div>').parent().html();

    alert(toc);
    return toc;
}




var myTOC = myQuickTOC()

$("#iframe-toc").contents().find("body").html(myTOC);