Fix interfering multicheckboxes

Project.toml

@@ -1,7 +1,7 @@
 name = "PlutoUI"
 uuid = "7f904dfe-b85e-4ff6-b463-dae2292396a8"
 authors = ["Fons van der Plas <[email protected]>"]
-version = "0.7.6"
+version = "0.7.7"
 
 [deps]
 Base64 = "2a0f44e3-6c83-55bd-87e4-b1978d98bd5f"

assets/multicheckbox.js

@@ -1,10 +1,12 @@
 const container = (currentScript ? currentScript : this.currentScript)
   .previousElementSibling;
 
+const my_id = crypto.getRandomValues(new Uint32Array(1))[0].toString(36)
+
 // Add checkboxes
 const inputEls = [];
 for (let i = 0; i < labels.length; i++) {
-  const boxId = `box-${i}`;
+  const boxId = `${my_id}-box-${i}`;
 
   const item = document.createElement("div");
   item.classList.add("multicheckbox");
@@ -40,17 +42,19 @@ if (includeSelectAll) {
   // Add select-all checkbox.
   const selectAllItem = document.createElement("div");
   selectAllItem.classList.add("multicheckbox");
-  selectAllItem.classList.add("select-all");
+  selectAllItem.classList.add(`select-all`);
 
+  const selectID = `${my_id}-select-all`
+
   const selectAllInput = document.createElement("input");
   selectAllInput.classList.add("multicheckbox");
   selectAllInput.type = "checkbox";
-  selectAllInput.id = "select-all";
+  selectAllInput.id = selectID;
   selectAllItem.appendChild(selectAllInput);
 
   const selectAllLabel = document.createElement("label");
   selectAllLabel.classList.add("multicheckbox");
-  selectAllLabel.htmlFor = "select-all";
+  selectAllLabel.htmlFor = selectID;
   selectAllLabel.innerText = "Select All";
   selectAllItem.appendChild(selectAllLabel);