JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<h1>TIAA-CREF Equity Index (Premier)<a class="MOD_FootnoteTrigger"><span class="note">Beef ribs capicola ground round, hamburger beef turducken jowl. Shank leberkas chicken, short ribs swine frankfurter hamburger rump jerky brisket turducken. T-bone turducken ground round bresaola pancetta ribeye. Flank cow ball tip pastrami turducken. Chicken rump ball tip sirloin swine pancetta.</span></a></h1>
<div id="box">Content</div>
<div id="MOD_Footnotes"></div>

CSS

.MOD_FootnoteTrigger 
{  
    vertical-align: super;
    line-height: 100%;
    font-size: 10px; 
}
.MOD_FootnoteTrigger .note{ display: none; }
a { color: blue; }
#box { margin: 25px; border: 1px solid grey; padding: 400px 0; text-align: center; }

JavaScript

(function($){
    $.fn.MOD_Footnote = function(){
        var n = getStartIndex(),
            $sorted = getSortedTriggers(),
            $notes = $('#MOD_Footnotes');
        
        function getStartIndex(){
            return 1;
        }
        
        function getSortedTriggers(){
            return this;
        }
        
        return this.each(function(){
            var $trigger = $(this),
                $note = $trigger.find('.note'),
                note = $note.html();
            
            $notes.append('<div class="MOD_Footnote"><a class="MOD_FootnoteTrigger" name="footnote-' + n + '" href="#trigger-' + n + '">' + n + '</a>' + note + '</div>');
            
            $trigger
                .attr('href', "#footnote-" + n)
                .attr('name', "trigger-" + n)
                .html(n);
                
            n++;
        });
    };
    
    $(document).ready(function(){
        $('.MOD_FootnoteTrigger').MOD_Footnote();
    });
})(jQuery);