htmx liveswap for increase/decrease

templates/food.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="card" id="card-{{ food.id }}">
   <p class="food-name">
     {{ food.name }}
   </p>
@@ -12,8 +12,8 @@
       </p>
     </div>
     <div class="buttons">
-      <button class="increase">+</button>
-      <button class="decrease">-</button>
+      <button class="increase" hx-post="/increase/{{ food.id }}" hx-target="#card-{{ food.id }}">+</button>
+      <button class="decrease" hx-post="/decrease/{{ food.id }}" hx-target="#card-{{ food.id }}">-</button>
     </div>
     <div class="checkboxes">
       {% for counter in self::range(10) %}