title: Table of content working on mobile but not desktop
body: <p>Some context: This is a table of content for a blog, but i want the TOC in desktop and mobile to be in a different part of the site. So they both have 2 different scripts of their own. The problem now is i manage to get the mobile version of it to work, but the desktop doesn't seem to be working. Anyone know why? Maybe a clash of codes?</p>
  <p><a href="https://i.stack.imgur.com/Oqrma.png" rel="nofollow noreferrer">Screenshot</a></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;!-- TOC --&gt;
  &lt;script&gt;
  const observer = new IntersectionObserver(entries =&gt; {
    entries.forEach(entry =&gt; {
      const id = entry.target.getAttribute("id");
      if (entry.isIntersecting) {
        document.querySelectorAll(".active").forEach((z) =&gt; {
          z.classList.remove("active")
        });
        document.querySelector(`a[href="#${id}"]`).classList.add("active");
      }
    });
  });
  &lt;/script&gt;
  
  &lt;script&gt;
  document.getElementById("content").querySelectorAll("h2,h3").forEach(function(heading, i) { // runs a function for all headings inside your rich text element
      observer.observe(heading);
    heading.setAttribute("id", "toc-" + i); // gives each heading a unique id
    const item = document.createElement("a"); // creates an &lt;a&gt; element called "item" for each heading
    item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading
    ("h2,h3").split(",").forEach(function(x) { // runs a function for each item in your headings list
      if (heading.tagName.toLowerCase()==x) {
        item.classList.add("tocitem", "toc-" + x); // gives each item the correct class
      }
    });
    item.setAttribute("href", "#toc-" + i); // gives each item the correct anchor link
    document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div
  });
  &lt;/script&gt;
  
  &lt;script&gt;
  document.getElementById("content").querySelectorAll("h2,h3").forEach(function(heading, i) { // runs a function for all headings inside your rich text element
      observer.observe(heading);
    heading.setAttribute("id", "toc-mobile-" + i); // gives each heading a unique id
    const item = document.createElement("a"); // creates an &lt;a&gt; element called "item" for each heading
    item.innerHTML = heading.innerHTML; // gives each item the text of the corresponding heading
    ("h2,h3").split(",").forEach(function(x) { // runs a function for each item in your headings list
      if (heading.tagName.toLowerCase()==x) {
        item.classList.add("tocitem-mobile", "toc-mobile-" + x); // gives each item the correct class
      }
    });
    item.setAttribute("href", "#toc-mobile-" + i); // gives each item the correct anchor link
    document.querySelector("#toc-mobile").appendChild(item); // places each item inside the Table of Contents div
  });
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>