JSFiddle - React, Tailwind, and code Playground

by saturngod

HTML

<div id="toc"></div>
<h1 id="test">Testing</h1>
<h2>Hello</h2>
<h3>Opa</h3>
<h1>another</h1>
<h2>Hello</h2>
<h3>Opa</h3>

JavaScript

var inc = 0;
function rec(k,i,array)
{

    if(array.length==i)
    {
        return "";
    }
    var list = "<ul>";
    $(k).next(array[i]).each(function(k,elem) {
        var lnk = $(this).text()+""+inc;
         list +="<a href='#"+lnk+"'><li>"+$(this).text()+"</li></a>";
          $(this).prepend("<a name='"+lnk+"'></a>");
         list += rec(this,i+1,array);
    });
    list +="</ul>";
    return list;
}

var header = ["h2","h3","h4","h5","h6"];

var mlist = "<ul>";
 $('h1').each(function(i,elem) {
     var lnk = $(this).text()+""+inc;
    mlist += "<a href='#"+lnk+"'><li>"+$(this).text()+"</li></a>";
     $(this).prepend("<a name='"+lnk+"'></a>");
     inc++;
    mlist += rec(this,0,header);     
});

$("#toc").html(mlist);