How to create a table of contents with javascript and prototype.js

<div id="toc" style="display:none;">
  <strong>
    Table of Contents
  </strong>
</div>

const createTableOfContents = (postContainerSelector, levels = 4) => {
  const tableOfContentsElement = document.getElementById('toc');

  if (!tableOfContentsElement) {
    return; // Exit early if the element doesn't exist
  }

  const headingLevels = Array.from({ length: levels }, (_, i) => i + 1);
  const selector = headingLevels.map(h => `${postContainerSelector} h${h}`).join(',');
  const headingElements = document.querySelectorAll(selector);

  if (headingElements.length === 0) {
    return; // Exit if no heading elements found
  }

  const createUniqueId = (element, index) => {
    let elementID = element.getAttribute('id');

    if (!elementID) {
      elementID = String(element.textContent)
        .normalize('NFKD')
        .replace(/[\u0300-\u036f]/g, '')
        .trim()
        .toLowerCase()
        .replace(/[^a-z0-9 -]/g, '')
        .replace(/\s+/g, '_')
        .replace(/-+/g, '_');

      element.setAttribute('id', `${elementID}_${index + 1}`);
    }

    return elementID;
  };

  const listElement = document.createElement('ol');

  headingElements.forEach((element, index) => {
    const elementID = createUniqueId(element, index);

    const tableOfContentsItemElement = document.createElement('li');
    const tableOfContentsActionElement = document.createElement('a');

    tableOfContentsActionElement.setAttribute('href', `#${elementID}`);
    tableOfContentsActionElement.textContent = element.textContent;

    tableOfContentsItemElement.appendChild(tableOfContentsActionElement);
    listElement.appendChild(tableOfContentsItemElement);
  });
  
  tableOfContentsElement.appendChild(listElement);

  tableOfContentsElement.style.display = 'block';
};

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', () => {createTableOfContents('article')});
} else {
  createTableOfContents('article');
}