title: How to automatically create local href links?
body: <p>I have a MediaWiki 1.33.0 website in which some articles contain footnotes. My problem is that these footnotes aren't locally linked (there is no link from footnote number to "footnotes" or "references" chapter).</p>
  
  <p>I create article footnotes by the following <em>Wiki syntax</em> templates and corresponding <em>JavaScript</em> codeblock:</p>
  
  <h2>1. Footnotes template</h2>
  
  <pre><code>&lt;includeonly&gt;&lt;ol id="footnotes_list"&gt;&lt;/ol&gt;&lt;/includeonly&gt;&lt;noinclude&gt;
  
  [[קטגוריה:תבניות]]
  &lt;/noinclude&gt;
  </code></pre>
  
  <h2>2. Footnote template</h2>
  
  <pre><code>&lt;includeonly&gt;&lt;span dir="rtl" class="footnote"&gt;&lt;sup class="footnote_inner"&gt;{{{1}}}&lt;/sup&gt;&lt;/span&gt;&lt;/includeonly&gt;&lt;noinclude&gt;
  
  [[קטגוריה:תבניות]]
  &lt;/noinclude&gt;
  </code></pre>
  
  <h2>3. Corresponding JavaScript</h2>
  
  <pre><code>const list = document.querySelector("#footnotes_list");
  document.querySelectorAll(".footnote&gt;sup").forEach((footnote, i) =&gt; {
      const li = document.createElement("li");
      li.append(...footnote.childNodes); // move content
      list.appendChild(li);
      footnote.textContent = i+1;
  });
  </code></pre>
  
  <p><sub><a href="https://stackoverflow.com/a/56921811/11744452">Credit for <code>user:trincot</code> for developing that code;</a></sub></p>
  
  <hr>
  
  <h2>Footnoted-article example:</h2>
  
  <pre><code>תוכן{{הערה|תוכן ההערה}}
  
  ==Footnotes Chapter==
  {{הערות שוליים}}
  </code></pre>
  
  <blockquote>
    <h2>My article</h2>
    
    <p><sup>1</sup>תוכן</p>
    
    <h3>Footnotes chapter</h3>
    
    <ol>
    <li>תוכן ההערה</li>
    </ol>
  </blockquote>
  
  <p>PHP execution of the above three code blocks allows such parsing and rendering of footnotes.</p>
  
  <hr>
  
  <h2>My problem</h2>
  
  <p>Footnotes created by the above code doesn't contain local <code>href</code> attributes and therefore, footnote numbers aren't clickable (as they are in English Wikipedia).</p>
  
  <p>I desire footnote numbers to be clickable and that clicking on them will lead a user to their corresponding footnote.</p>
  
  <h2>Note</h2>
  
  <p>To <strong>manually</strong> create local <code>href</code> link I would do the following (clicking the X leads to Y) but I don't know how to create this <strong>automatically</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#my_manual_href"&gt;X&lt;/a&gt;
  
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;br&gt;
  
  &lt;h2 id="my_manual_href"&gt;Y&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2>My question</h2>
  
  <p>How to automatically create local <code>href</code> links?</p>