Добавление новой строки таблицы с помощью HTMX

Я пытаюсь добавить новую строку таблицы с помощью Htmx. При нажатии кнопки "Add A New Row" новая строка должна быть добавлена в таблицу. Я не могу добиться добавления строки в secondary_hx.html в таблицу, вместо этого получается три формы рядом друг с другом без или . Буду признателен за любую помощь. Заранее спасибо. Мой код выглядит следующим образом:

main.html:

<table id="myTable">
  <thead>
      <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
      </tr>
  </thead>
  <tbody id="Tbody">
      <tr>
          <td>
             <button class="add_button"
                type="submit"
                hx-post="/add_row/"
                hx-target="#Tbody"
                hx-swap="beforeend"
                >
                  Add A New Row
             </button>
          </td>
      </tr>
  </tbody>
</table>

partials/secondary_hx.html:

<tr hx-target="this"
    hx-swap="outerHTML">
    <td>{{ form.a }}</td>
    <td>{{ form.b }}</td>
    <td>{{ form.c }}</td>
</tr>

Вернуться на верх