add multiple submitters input form

app/javascript/application.js

@@ -9,6 +9,7 @@ import FileDropzone from './elements/file_dropzone'
 import MenuActive from './elements/menu_active'
 import ClipboardCopy from './elements/clipboard_copy'
 import TemplateBuilder from './template_builder/builder'
+import DynamicList from './elements/dynamic_list'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -26,6 +27,7 @@ window.customElements.define('turbo-modal', TurboModal)
 window.customElements.define('file-dropzone', FileDropzone)
 window.customElements.define('menu-active', MenuActive)
 window.customElements.define('clipboard-copy', ClipboardCopy)
+window.customElements.define('dynamic-list', DynamicList)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/dynamic_list.js

@@ -0,0 +1,33 @@
+import { actionable } from '@github/catalyst/lib/actionable'
+import { targets, targetable } from '@github/catalyst/lib/targetable'
+
+export default actionable(targetable(class extends HTMLElement {
+  static [targets.static] = ['items']
+
+  addItem = (e) => {
+    e.preventDefault()
+
+    const originalItem = this.items[0]
+    const duplicateItem = originalItem.cloneNode(true)
+    const uniqueId = Math.floor(Math.random() * 10 ** 16)
+
+    duplicateItem.querySelectorAll("select, textarea, input:not([type='hidden'])").forEach((input) => {
+      input.value = ''
+      input.checked = false
+      input.removeAttribute('selected')
+    })
+
+    duplicateItem.querySelectorAll('select, textarea, input').forEach((input) => {
+      input.name = input.name.replace('[1]', `[${uniqueId}]`)
+    })
+
+    duplicateItem.querySelectorAll('a.hidden').forEach((button) => button.classList.toggle('hidden'))
+
+    originalItem.parentNode.append(duplicateItem)
+  }
+
+  removeItem = (e) => {
+    e.preventDefault()
+    this.items.find((item) => item.contains(e.target))?.remove()
+  }
+}))