I have a website that uses editable divs so that a user can modify or make notes to a text. Is there a way I can have the website generate a pdf or some printable document with footnotes, such that if a user has this:

<div class="text" id="text_1">
    <div class="bodyTest">This is the body text</div>
    <div class="notes">These are the notes</div>
</div>
<div class="text" id="text_2">
    <div class="bodyTest">This is the body text</div>
    <div class="notes">These are the notes</div>
</div>

the website will generate a printable version (or document) in such a way thatdiv.notes will appear as a footnote on the same page on which div#text_1 appears? I don't need a full answer, just a shove in the general direction will be amazing. Thanks.