changes to blocks and styles

assets/js/backend-script.js

@@ -55,4 +55,62 @@ document.addEventListener('DOMContentLoaded', function() {
             });
         });
     });
-});
+});
+
+
+
+
+
+
+
+// REPEATERS
+    // Example html:
+    //  <div class="my-repeater-container">
+    // <div class="my-repeater-row">
+    // <input type="text" name="field_1[]">
+    // <input type="text" name="field_2[]">
+    // <input type="text" name="field_3[]">
+    //<button class="delete-repeater-row">Delete Row</button>
+    //</div>
+    //<button class="new-repeater-row">Click to add a new row</button>
+    //</div>
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Get all repeater containers
+    const repeaterContainers = document.querySelectorAll('.my-repeater-container');
+    
+    // Loop through each repeater container and initialize the functionality
+    repeaterContainers.forEach(function (container) {
+        const newRowButton = container.querySelector('.new-repeater-row');
+        const rowTemplate = container.querySelector('.my-repeater-row');
+
+        // Hide the row template (we will clone it)
+        rowTemplate.style.display = 'none';
+
+        // Add event listener for the 'Add New Row' button
+        newRowButton.addEventListener('click', function () {
+            // Clone the row template
+            const newRow = rowTemplate.cloneNode(true);
+
+            // Make sure the new row is visible
+            newRow.style.display = 'flex';  // or 'block' based on your layout
+
+            // Reset input values in the new row
+            const inputs = newRow.querySelectorAll('input');
+            inputs.forEach(input => input.value = '');
+
+            // Add the new row to the repeater container
+            container.insertBefore(newRow, newRowButton);
+        });
+
+        // Handle deleting rows
+        container.addEventListener('click', function (e) {
+            if (e.target && e.target.classList.contains('delete-repeater-row')) {
+                const rowToDelete = e.target.closest('.my-repeater-row');
+                if (rowToDelete) {
+                    rowToDelete.remove();
+                }
+            }
+        });
+    });
+});