JSFiddle - React, Tailwind, and code Playground

HTML

no javascript:
<div id="without-js">
    <p>So I heard his name was <a class="reference" hint="About Jake Smith..." href="http://www.example.com">Jake Smith</a>. I couldn't care less about <a class="reference" href="http://www.google.com">what his name</a> is.</p>
</div>

icanhasjs:
<div id="with-js">
    <p>So I heard his name was <a class="reference" hint="About Jake Smith..." href="http://www.example.com">Jake Smith</a>. I couldn't care less about <a class="reference" href="http://www.google.com">what his name is</a>.</p>
</div>

CSS

#with-js,
#without-js {
    padding:10px;
    border:1px solid #ccc;
    background-color:#eee;
    margin:0 0 30px 0; 
}

#reference-list {
    list-style-type:none; 
}

#reference-list li {
    font:normal 10px verdana;   
}

JavaScript

$("<hr /><ul id='reference-list'>").appendTo("#with-js");

$("#with-js a.reference").each(function(idx) {
    var $this = $(this);
    var linkText = $this.text();
    var num = parseInt(idx+1);
    var titleText = (typeof $this.attr("hint") !== 'undefined' && $this.attr("hint") !== false && $this.attr("hint") != "") ? $this.attr("hint") : $this.html();
    $("<li>")
        .html('[' + num + '] ' + titleText
               + ' <a id="cite_note_' + num + '" href="' + $this.attr("href") + '">'
               + $this.attr("href") + '</a>')
        .appendTo("#reference-list");
    $this.after(linkText + '<sup><a href="#cite_note_' + num + '">' + num + '</a></sup>' ).remove();
});