this is getting messy time for a rethink

src/script/newRecipe.ts

@@ -1,3 +1,5 @@
+import client from "@/data/pocketbase"
+
 let ingredientFields: HTMLInputElement[] = []
 let ingredientTable: HTMLTableSectionElement = document.querySelector('#ingredient-table')!
 let ingredientAddButton: HTMLButtonElement = document.querySelector('#add-ingredient-btn')!
@@ -8,13 +10,26 @@ let stepList: HTMLUListElement = document.querySelector('#step-list')!
 let currentStepIndex = 0
 
 // - VARS
-let ingredients: {qty: string, unit: string, name: string}[] = []
+let ingredients: {quantity: string, unit: string, name: string}[] = []
 let steps: {
     index: number,
     instruction: string,
     ingredients: string[], // IDs of ingredient fields
 }[] = []
 
+const formFields = () => {
+    return {
+        name: (document.querySelector("#rec-name") as HTMLTextAreaElement).value ?? "",
+        description: (document.querySelector("#rec-desc") as HTMLTextAreaElement).value ?? "",
+        servings: (document.querySelector("#rec-servings") as HTMLInputElement).value ?? "",
+        worktime: (document.querySelector("#rec-worktime") as HTMLInputElement).value ?? "",
+        waittime: (document.querySelector("#rec-waittime") as HTMLInputElement).value ?? "",
+        rating: (document.querySelector("#rec-rating") as HTMLInputElement).value ?? "",
+        ings: ingredients,
+        stepList: steps
+    }
+}
+
 // - INIT
 document.addEventListener('DOMContentLoaded', function() {
     
@@ -25,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function() {
     )
 
     stepInput.addEventListener('input', showAddStepButton)
+    document.querySelector('#btn-save')?.addEventListener('click', addRecipe)
     
     // show plus button once the user types in the text fields
     ingredientFields.forEach(f => {
@@ -60,9 +76,27 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 // - ADD
+async function addRecipe() {
+    const comps = formFields()
+    console.log(comps.ings)
+    
+    const ingredientIDs = await Promise.all(
+        comps.ings.map(async it => (await client.pb.collection('ingredients').create({
+            'quantity': it.quantity,
+            'name': it.name,
+            'unit': it.name
+        })).id) // get the id of the returned record
+    )
+
+    const stepIds = await Promise.all(
+        
+    )
+
+}
+
 function addIngredient() {
     const ing = {
-        qty: ingredientFields[0].value,
+        quantity: ingredientFields[0].value,
         unit: ingredientFields[1].value,
         name: ingredientFields[2].value
     }
@@ -71,7 +105,7 @@ function addIngredient() {
     
     const newRow = document.createElement('tr')
     newRow.innerHTML = `
-        <td class="px-4 py-2 border-t border-white/10">${ing.qty}</td>
+        <td class="px-4 py-2 border-t border-white/10">${ing.quantity}</td>
         <td class="px-4 py-2 border-t border-white/10">${ing.unit}</td>
         <td class="px-4 py-2 border-t border-white/10">${ing.name}</td>
     `