Editing Comrade:CriticalResist/sandbox/Hyperlink buttons on headings documentation

In september 2023 I added some simple JavaScript to [[MediaWiki:Common.js|Common.js]] to add a hyperlink icon on the Citizen skin next to all headings and subheadings.

At this time however I disabled the code on level 1 headings because clicking on the hyperlink button somehow made the heading collapse as well (which is the normal behaviour from this skin, you can collapse level 1 headings, but not when you click on the button. Anyway, this is the only code needed:<blockquote>(function($, mw) {

   // Wait for the DOM to be ready

   $(document).ready(function() {

       // Loop through all the section headings and subheadings

       /*$('.section-heading .mw-headline, .section-subheading .mw-headline').each(function() {*/

       $('.section-subheading .mw-headline').each(function() {

           // Get the section title

           var sectionTitle = $(this).text();

           

           // Replace spaces with underscores in the section title

           var sectionTitleWithUnderscores = sectionTitle.replace(/ /g, '_');

           

           // Create the HTML for the hyperlink button

           var hyperlinkButton = '<a class="heading-hyperlink mw-editsection-visualeditor citizen-editsection-icon mw-ui-icon-wikimedia-link" href="/wiki/' + mw.config.get('wgPageName') + '#' + sectionTitleWithUnderscores + '" title="' + sectionTitle + '"></a>';

           // Insert the button HTML after the section heading or subheading

           $(this).after(hyperlinkButton);

       });

   });

})(jQuery, mediaWiki);

</blockquote>Pretty self-explanatory, the only catch is this:<blockquote>       /*$('.section-heading .mw-headline, .section-subheading .mw-headline').each(function() {*/</blockquote>Which has been commented out. Once we figure out how to make it work with level 1 headings, you can bring back '.section-heading .mw-headline, in the function -- the line right below this commented out piece of code is the exact same just without the level 1 headings included.
@@ Line 40: / Line 40: @@
 </blockquote>Pretty self-explanatory, the only catch is this:<blockquote>       /*$('.section-heading .mw-headline, .section-subheading .mw-headline').each(function() {*/</blockquote>Which has been commented out. Once we figure out how to make it work with level 1 headings, you can bring back '.section-heading .mw-headline, in the function -- the line right below this commented out piece of code is the exact same just without the level 1 headings included.
-== Known issues ==
-* had to disable lvl1 headings because if you click on the icon, it collapses the section for some reason (the button should take priority over the collapsing)
-* If headings have the same name (such as Notes) it will take you to the first instance. Should be fixable easily by appending _2, _3 etc for each new instance which is what MediaWiki does.