update quantity with arrow up/down

src/routes/portfolio/+page.svelte

@@ -27,17 +27,17 @@
     async function fetchPortfolio() {
         try {
             const response = await fetch(
-                `${import.meta.env.VITE_STOCKS_HOST}/api/portfolios`,
-                {
-                    method: 'GET',
-                    headers: {
-                        Authorization: 'Bearer ' + authToken
-                    }
-                }
+              `${import.meta.env.VITE_STOCKS_HOST}/api/portfolios`,
+              {
+                  method: 'GET',
+                  headers: {
+                      Authorization: 'Bearer ' + authToken
+                  }
+              }
             );
 
             if (response.ok) {
-                await update(response.json())
+                await update(response.json());
             } else {
                 const error = await response.json();
                 console.error('Failed to find portfolio info:', error);
@@ -192,7 +192,7 @@
         const quantity = parseInt(form.get("quantity")) || 0;
 
         result = result.map(stock =>
-            stock.code === code ? {...stock, quantity} : stock
+          stock.code === code ? {...stock, quantity} : stock
         );
 
         updatePortfolio(result);
@@ -205,7 +205,22 @@
 
     function updateOrderBy(event) {
         orderBy = event.target.value;
-        fetchPortfolio()
+        fetchPortfolio();
+    }
+
+    function handleInputChange(event) {
+        // Update stock quantity with the new value from the input field
+        const form = new FormData(event.target.closest('form'));
+        const code = form.get("code");
+        const quantity = parseInt(form.get("quantity")) || 0;
+
+        // Update the stock array with the new quantity
+        result = result.map(stock =>
+          stock.code === code ? { ...stock, quantity } : stock
+        );
+
+        // Manually trigger form submission
+        event.target.form.requestSubmit();
     }
 </script>
 
@@ -303,7 +318,7 @@
                     <td class="qty-edit">
                         <form id="updateQuantity" on:submit|preventDefault={updateStockQuantity}>
                             <input type="hidden" name="code" value="{stock.code}"/>
-                            <input type="number" class="qty-input" name="quantity" value="{stock.quantity}"/>
+                            <input type="number" class="qty-input" name="quantity" value="{stock.quantity}" on:input={handleInputChange}/>
                         </form>
                     </td>
                     <td class="price">{formatCurrency(stock.price)}</td>
@@ -321,6 +336,7 @@
     <div>No portfolio data available.</div>
 {/if}
 
+
 <style>
     /* General Styles for Table (Unchanged) */
     .table-container {