Use this pattern when a page needs standard footnotes plus a separate end-of-page notes section.
<p>
Main text with a footnote<a id="fnref:1" href="#fn:1" class="footnote"><sup>1</sup></a>
and an endnote<a id="enref:1" href="#en:1" class="endnote"><sup>1</sup></a>.
</p>
<ol class="footnotes">
<li id="fn:1">
<p>
Footnote text. <a href="#fnref:1" class="footnote__back" aria-label="Back to reference">↩</a>
</p>
</li>
</ol>
<ol class="endnotes">
<li id="en:1">
<p>
Endnote text. <a href="#enref:1" class="endnote__back" aria-label="Back to endnote reference">↩</a>
</p>
</li>
</ol>
Notes:
<ol class="footnotes">.<ol class="endnotes">.