JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myText">
    <p id="p1"><a class="note-p1" href="#" style="display:none" target="bot">✽</a></strong>Lorem ipsum</p>
    <p id="p2"><a class="note-p2" href="#" style="display:none" target="bot">✽</a></strong>Foo bar</p>
    <p id="p3"><a class="note-p3" href="#" style="display:none" target="bot">✽</a></strong>Chocolate peanut butter</p>
     (etc for 1000 lines)
    <p id="p1000"><a class="note-p1000" href="#" style="display:none" target="bot">✽</a></strong>Go Yankees!</p>
</div>

<div id="myNotes">
    <p id="n1"><cite class="note-p1"><sup>1</sup><span>Trololo</span></cite></p>
    <p id="n2"><cite class="note-p1"><sup>2</sup><span>Trololo</span></cite></p>
    <p id="n3"><cite class="note-p2"><sup>3</sup><span>lololo</span></cite></p>
     (etc for n lines)
    <p id="n"><cite class="note-p885"><sup>n</sup><span>lololo</span></cite></p>
</div>

CSS

#myNotes cite {
    display:none;
}

JavaScript

$('#myText a').each(function() {
    $("#myNotes ." + $(this).attr('class')).show();
});