anchor.diff:    <!-- remove toc active class when page is loaded -->
     <script type="text/javascript">
       window.addEventListener('DOMContentLoaded', () => {
  -      var tocItems = $("#toc a");
  -
  -      for (let i = 0; i < tocItems.length; i++) {
  -        tocItems[i].classList.remove("toc-active");
  +      toc_items = document.querySelectorAll('#toc a')
  +
  +      for (let i = 0; i < toc_items.length; i++) {
  +        toc_items[i].classList.remove("toc-active");
         }
       })
     </script>
  
positive.code:   <!-- clear and add toc-active to clicked toc link -->
    <script type="text/javascript">
    $("#toc a").click(function() {
      var tocItems = $("#toc a");
      for (let i = 0; i < tocItems.length; i++) {
        tocItems[i].classList.remove("toc-active");
      }
      this.classList.add("toc-active");
    });
  
negative.code:         document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
            observer.unobserve(h);
          });
          toc_items = document.querySelectorAll('#toc a')
          for (let i = 0; i < toc_items.length; i++) {
            toc_items[i].classList.remove("toc-active");
          }
          this.classList.add("toc-active");
        })
  