fix(pat autotoc): Fix for having duplicated ids incase of multiple autotoc elements

Author: cihanandac

src/pat/autotoc/autotoc.js

@@ -28,6 +28,9 @@ export default Base.extend({
 
         var self = this;
 
+        const autotocInstances = $(".pat-autotoc");
+        self.instanceIndex = autotocInstances.index(self.$el);
+
         const $nav = $("<nav/>")
             .attr("aria-label", "Tab Navigation");
 
@@ -81,7 +84,7 @@ export default Base.extend({
             const $section = $level.closest(self.options.section);
             let sectionId = $section.prop("id");
             let sectionHash = `#${sectionId}`;
-            const tabId = `${self.options.IDPrefix}${self.name}-${i}`;
+            const tabId = `${self.options.IDPrefix}${self.name}-${self.instanceIndex}-${i}`;
             const tabHash = `#${tabId}`;
             const levelId = `${tabId}-pane`;
             const levelHash = `#${levelId}`;

src/pat/autotoc/autotoc.test.js

@@ -58,12 +58,10 @@ describe("1 - AutoTOC", function () {
         await utils.timeout(1);
 
         const firstTab = document.querySelectorAll(".nav > li > a")[0]
-        expect(firstTab.getAttribute("id")).toEqual(
-            "autotoc-item-autotoc-0"
+        expect(firstTab.getAttribute("id")).toEqual("autotoc-item-autotoc-0-0");
+        expect(firstTab.getAttribute("data-bs-target")).toEqual(
+            "#autotoc-item-autotoc-0-0-pane",
         );
-        expect(
-            firstTab.getAttribute("data-bs-target")
-        ).toEqual("#autotoc-item-autotoc-0-pane");
     });
     it("can have custom levels", async function () {
         this.$el.attr("data-pat-autotoc", "levels: h1");