JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Title</h1>
<a name="contents"><h2>Contents</h2></a>
<ul id="toc"></ul>

<a name="plants"><h2>Plants</h2></a>
<ol>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Pears</li>
</ol>

<a name="veggies"><h2>Veggies</h2></a>
<ol>
    <li>Carrots</li>
    <li>Celery</li>
    <li>Beats</li>
</ol>

CSS

li { display: list-item; }
h1 { font-size: 1em; margin: .67em 0 }
h2 { font-size: .8em; margin: .75em 0 }
h1, h2 {font-weight: bolder;}
ol, ul, dir,
menu, dd { margin-left: 40px }
ol { list-style-type: decimal; }
ul { list-style-type: circle; }
ul, ol { display: block; font-size:.7em; margin-top: 0; margin-bottom: 0 }

JavaScript

$(document).ready(function() {
    var toc = document.getElementById("toc");
    var i, li, newAnchor;
    for (i = 0; i < document.anchors.length; i++) {
        li = document.createElement("li");
        newAnchor = document.createElement('a');
        newAnchor.href = "#" + document.anchors[i].name;
        newAnchor.innerHTML = document.anchors[i].text;
        li.appendChild(newAnchor);
        toc.appendChild(li);
    }
});