I’m trying out htmx for the first time, I feel it can be right up my alley.
I have this really simple example and would like to add some client side functionality.
In this case, let say i want a min = 0 and max = 10 and disable the increment and decrement buttons accordingly.
Obviously, here, my desired outcome doesn’t happen, because the main render only renders at the page request and so, the “decrement” button starts off and always stays disabled and the “increment” never becomes disabled…

import { Hono } from 'hono';
import { Layout } from '@/Layouts/Dashboard';
const MIN = 0;
const MAX = 10;

let count = 0;

export const appRouter = new Hono();

appRouter.get('/', async (c) => {
  return c.html(
    <Layout>
      <div class="mt-2 flex flex-col gap-3 text-center">
        <h1 class="text-6xl">Admin fullstack HTMX App</h1>
        <div class="mx-auto flex w-[50%] justify-between">
          <button
            class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
            hx-post="/decrement"
            hx-swap="outerHTML"
            hx-target="#counter"
            disabled={count <= MIN}
          >
            Decrement
          </button>
          <button
            class="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
            hx-post="/increment"
            hx-swap="outerHTML"
            hx-target="#counter"
            disabled={count >= MAX}
          >
            Increment
          </button>
        </div>
        <span class="text-5xl" id="counter">
          {count}
        </span>
      </div>
    </Layout>,
  );
});

appRouter.post('/increment', async (c) => {
  count++;
  return c.html(
    <span class="text-5xl" id="counter">
      {count}
    </span>,
  );
});

appRouter.post('/decrement', async (c) => {
  count--;
  return c.html(
    <span class="text-5xl" id="counter">
      {count}
    </span>,
  );
});

I’m looking for examples of ways this can be achieved in a simple / clean way.
Thanks