JSFiddle - React, Tailwind, and code Playground

by Danny Hearnah

HTML

table of contents
<ul class="contents"></ul>

<h1>Chapter 1</h1>
<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<p class="footnote">this is a footnote about the first sentence</p>

<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<p class="footnote">this is my second footnote</p>

<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<h1>Chapter 2</h1>

<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<p class="footnote">Oh yeh, here's some footnotes about some chapter 2 bits</p>

<p>Sed aliquet vestibulum placerat. Aliquam sed dui tincidunt, suscipit quam eget, viverra elit. Mauris eleifend urna non mi tristique laoreet non volutpat nibh.</p>

<h1>Chapter 3</h1>

CSS

.real_footnotes a {
    margin-right:10px;
    font-size:10px;
    font-style:italic;
}

JavaScript

$(document).ready(function(e){
    // loop through each chapter title and place a footnote wrapper before it
    $('h1').each(function(key,elm){
        var _key = key+1;
        
        $(this).before('<p class="real_footnotes" />');
        
        // create the anchor point
        var aname = $('<a />');
            aname.attr('name','chapter' + _key);
        $(this).before( aname );

        
        // create the link/placeholder
        var li = $('<li />');
        var ahref = $('<a />');
            ahref.attr('href','#chapter' + _key);
            ahref.text( $(this).text() );
        
        li.html( ahref );
        
        // replace the original footnote with the placeholder
        $('.contents').append( li );        
    });
    
    // loop through each footnote
    $('.footnote').each(function(key,elm){
        var _key = key+1;
        
        // copy the text of the footnote
        var cloned = $(this).text();
        
        // create the anchor point
        var aname = $('<a />');
            aname.attr('name','footnote' + _key);
            aname.text( _key + ': ' + cloned );
        
        // find the footnote wrapper for that chapter and add the footnote to it
        $(this).nextAll('.real_footnotes').first().append( aname );
        
        // create the link/placeholder
        var ahref = $('<a />');
            ahref.attr('href','#footnote' + _key);
            ahref.text( _key );
        
        // replace the original footnote with the placeholder
        $(this).html( ahref );
    });
});