new cake form

templates/available_cakes.html

@@ -1,40 +1,44 @@
-<div id="add_cakes_dropdown">
-    {{range .Cakes}}
-    <button onclick="addCake('{{.ID}}', '{{.Name}}')" id=" cake_button[{{.ID}}]">{{.Name}}</button>
-    {{end}}
-</div>
-<script>
-    function addCake(id, name) {
-        const existing = document.getElementById("cake[" + id + "]")
-        if (existing != null) {
-            existing.value++
-            return
+<div>
+    <h3>Cakes</h3>
+    <button hx-get="edit_cakes" hx-swap="outerHTML" hx-target="closest div">edit</button>
+    <div id="cakes">
+        {{range .Cakes}}
+        <button onclick="addCake('{{.ID}}', '{{.Name}}')">{{.Name}}</button>
+        {{end}}
+    </div>
+    <script>
+        function addCake(id, name) {
+            const existing = document.getElementById("cake[" + id + "]")
+            if (existing != null) {
+                existing.value++
+                return
+            }
+
+            const label = document.createElement('label')
+            label.innerText = name
+            label.setAttribute("for", "cake[" + id + "]")
+
+            const input = document.createElement('input')
+            input.setAttribute("type", "number")
+            input.setAttribute("id", "cake[" + id + "]")
+            input.setAttribute("name", "cake[" + id + "]")
+            input.setAttribute("value", 1)
+
+            const selected = document.createElement('div')
+            selected.appendChild(label)
+            selected.appendChild(input)
+
+            const deleteButton = document.createElement('button')
+            deleteButton.setAttribute("type", "button")
+            deleteButton.innerText = "delete"
+            deleteButton.addEventListener("click", function () {
+                selected.remove()
+            })
+
+            selected.appendChild(deleteButton)
+
+            const parent = document.getElementById("selected_cakes")
+            parent.appendChild(selected)
         }
-
-        const label = document.createElement('label')
-        label.innerText = name
-        label.setAttribute("for", "cake[" + id + "]")
-
-        const input = document.createElement('input')
-        input.setAttribute("type", "number")
-        input.setAttribute("id", "cake[" + id + "]")
-        input.setAttribute("name", "cake[" + id + "]")
-        input.setAttribute("value", 1)
-
-        const selected = document.createElement('div')
-        selected.appendChild(label)
-        selected.appendChild(input)
-
-        const deleteButton = document.createElement('button')
-        deleteButton.setAttribute("type", "button")
-        deleteButton.innerText = "delete"
-        deleteButton.addEventListener("click", function () {
-            selected.remove()
-        })
-
-        selected.appendChild(deleteButton)
-
-        const parent = document.getElementById("selected_cakes")
-        parent.appendChild(selected)
-    }
-</script>
+    </script>
+</div>