Got the UI working

assets/javascripts/index.js

@@ -1,9 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-  if (typeof Stimulus === "undefined") {
-    console.error("Stimulus is not loaded. Make sure the UMD script is included first.");
-    return;
-  }
-
-  const application = Stimulus.Application.start();
-  application.register("nested-form", window.NestedFormController);
-});

assets/javascripts/nested_form_controller.js

@@ -1,19 +1,53 @@
-(function() {
-  class NestedFormController extends Stimulus.Controller {
-    static targets = ["container", "template"]
+(function () {
+  function initNestedForms() {
+    document.querySelectorAll("[data-nested-form]").forEach(function (wrapper) {
+      if (wrapper.dataset.initialized === "true") return;
+      wrapper.dataset.initialized = "true";
 
-    add(event) {
-      event.preventDefault();
-      const content = this.templateTarget.innerHTML.replace(/NEW_RECORD/g, new Date().getTime());
-      this.containerTarget.insertAdjacentHTML("beforeend", content);
-    }
+      const container = wrapper.querySelector("[data-nested-form-container]");
+      const template = wrapper.querySelector("[data-nested-form-template]");
 
-    remove(event) {
-      event.preventDefault();
-      event.target.closest(".nested-fields").remove();
-    }
+      if (!container || !template) return;
+
+      wrapper.addEventListener("click", function (event) {
+        const addButton = event.target.closest("[data-nested-form-add]");
+        const removeButton = event.target.closest("[data-nested-form-remove]");
+
+        // ADD
+        if (addButton) {
+          event.preventDefault();
+
+          const content = template.innerHTML.replace(
+            /NEW_RECORD/g,
+            Date.now().toString()
+          );
+
+          container.insertAdjacentHTML("beforeend", content);
+        }
+
+        // REMOVE
+        if (removeButton) {
+          event.preventDefault();
+
+          const lineItem = removeButton.closest(wrapper.dataset.wrapperSelector);
+          if (!lineItem) return;
+
+          const destroyField = lineItem.querySelector("input[name*='_destroy']");
+
+          if (destroyField) {
+            destroyField.value = "1";
+            lineItem.style.display = "none";
+          } else {
+            lineItem.remove();
+          }
+        }
+      });
+    });
   }
 
-  // Expose globally so index.js can access it
-  window.NestedFormController = NestedFormController;
+  // Works for full load
+  document.addEventListener("DOMContentLoaded", initNestedForms);
+
+  // Works for Turbo navigation
+  document.addEventListener("turbo:load", initNestedForms);
 })();