I am writing a simple web application with CRUD operations using Thymeleaf as a template engine. The problem is, this is my code:

<form th:method="POST" th:action="@{/}">
    <div>
       <ul th:each="balloon: ${balloons}" style="list-style-type: none">
          <li>
             <input type="radio" name="balloonType" th:text="${balloon.getName()}"
                    th:value="${balloon.getDescription()}">
          </li>

          <div>
             <form th:method="POST" th:action="@{'/balloons/delete/{id}' (id=${balloon.getId()})}">
                 <input type="submit" value="Delete">
             </form>
          </div>

       </ul>
       <input type="submit" value="Submit">
    </div>
    <br/>
</form>

and when I run the application, the code in the inspect element is shown in the picture below. The first delete button does not appear in its own form and therefore does not work properly. Any help is welcome.