JSFiddle - React, Tailwind, and code Playground

by lbstr

HTML

<span class="MOD_EmbededFootnote" data-number="3">ThreeThreeThreeThree</span>
<span class="MOD_EmbededFootnote" data-number="7">SevenSevenSevenSeven</span>
<span class="MOD_EmbededFootnote" data-number="5">FiveFiveFive</span>
<span class="MOD_EmbededFootnote" data-number="1">OneOneOneOneOne</span>
<span class="MOD_EmbededFootnote" data-number="5">FiveFiveFiveFive</span>

<div id="MOD_Footnotes"></div>

CSS

.MOD_EmbededFootnote { display: none; }

JavaScript

(function(){
    var $embeded = $('.MOD_EmbededFootnote'),
        $footnotes = $('#MOD_Footnotes');
    if (!$embeded.length || !$footnotes.length) { return; }

    var notes = [];
    $embeded.each(function(){
        var $this = $(this);
        notes.push({
            num: parseInt($this.data('number'), 10),
            note: $this.html()
        });
    });
    notes.sort(function(a, b){
        return a.num > b.num;
    });
        
    var html = [];
    for (var i = 0; i < notes.length; i++) {
        if (i > 0 && notes[i].num === notes[i-1].num) continue;
        html.push('<p class="MOD_footnote">');
        html.push(notes[i].note);
        html.push('</p>');
    }
    $footnotes.append(html.join(''));
})();