gotodo/templates/todos.html

<ul id="todos" class="shadow-lg grid grid-cols-1 gap-2">
  {{range $index, $task := . }}
  <li id={{$task.Id}} class="p-4 rounded-xl bg-slate-100">
    <input type="checkbox" {{if $task.Completed}}checked{{end}}
      hx-post="/toggle-todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">
      {{$task.Title}}
    <button class="bg-red-500"
      hx-delete="/todo/{{$index}}" hx-swap="outerHTML" hx-target="#todos">X</button>
  </li>
  {{end}}
  <li>
<form class="p-4 rounded-xl bg-slate-100" hx-post="/todos" hx-swap="outerHTML" hx-target="#todos">
<label class="flex p-4">
    Title:
    <input type="text" name="title" class="grow" ></input>
    <button name="submit" class="bg-sky-500">Add</button>
</label>
</form>

    </li>
</ul>