app/assets/javascripts/formstrap/controllers/repeater_controller.js in formstrap-0.2.1 vs app/assets/javascripts/formstrap/controllers/repeater_controller.js in formstrap-0.3.0

@@ -37,11 +37,11 @@
     return this.rowTargets.includes(row)
   }
 
   updatePopupButtonIndices (index) {
     const popup = document.querySelector(`[data-popup-target="popup"][data-popup-id="repeater-buttons-${this.idValue}"]`)
-    const buttons = popup.querySelectorAll('a')
+    const buttons = popup.querySelectorAll('[data-popup-target="button"]')
     buttons.forEach((button) => {
       button.dataset.rowIndex = index
     })
   }
 
@@ -50,21 +50,21 @@
     const button = event.target
     const templateName = button.dataset.templateName
     const rowIndex = button.dataset.rowIndex
 
     // Prepare html from template
-    const template = this.getTemplate(templateName)
-    const html = this.replaceIdsWithTimestamps(template)
+    let template = this.getTemplate(templateName).content.cloneNode(true)
+    template = this.replaceIdsWithTimestamps(template)
 
     // Fallback to last row if no index is set
     if (rowIndex) {
       // Insert new row after defined row
       const row = this.rowTargets[rowIndex]
-      row.insertAdjacentHTML('afterend', html)
+      this.listTarget.insertBefore(template, row.nextSibling)
     } else {
       // Insert before footer
-      this.footerTarget.insertAdjacentHTML('beforebegin', html)
+      this.listTarget.insertBefore(template, this.footerTarget)
     }
 
     this.resetIndices()
     this.resetPositions()
     this.toggleEmpty()
@@ -106,11 +106,43 @@
       return template.dataset.templateName === name
     })[0]
   }
 
   replaceIdsWithTimestamps (template) {
-    const regex = new RegExp(template.dataset.templateIdRegex, 'g')
-    return template.innerHTML.replace(regex, new Date().getTime())
+    const pattern = 'rrrrrrrrr'
+    const replacement = new Date().getTime().toString()
+
+    // Replace ids
+    template.querySelectorAll(`input[id*="${pattern}"], select[id*="${pattern}"], textarea[id*="${pattern}"], button[id*="${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute('id')
+      node.setAttribute('id', idValue.replace(pattern, replacement))
+    })
+
+    // Replace labels
+    template.querySelectorAll(`label[for*="${pattern}"]`).forEach((node) => {
+      const forValue = node.getAttribute('for')
+      node.setAttribute('for', forValue.replace(pattern, replacement))
+    })
+
+    // Replace names
+    template.querySelectorAll(`input[name*="${pattern}"], select[name*="${pattern}"], textarea[name*="${pattern}"], button[name*="${pattern}"]`).forEach((node) => {
+      const nameValue = node.getAttribute('name')
+      node.setAttribute('name', nameValue.replace(pattern, replacement))
+    })
+
+    // Replace offcanvas targets
+    template.querySelectorAll(`div[data-bs-target="#offcanvas-${pattern}"]`).forEach((node) => {
+      const targetValue = node.getAttribute('data-bs-target')
+      node.setAttribute('data-bs-target', targetValue.replace(pattern, replacement))
+    })
+
+    // Replace offcanvas ids
+    template.querySelectorAll(`.offcanvas[id="offcanvas-${pattern}"]`).forEach((node) => {
+      const idValue = node.getAttribute('id')
+      node.setAttribute('id', idValue.replace(pattern, replacement))
+    })
+
+    return template
   }
 
   visibleRowsCount () {
     return this.visibleRows().length
   }