I am struggling with a problem to show a form conditionally using Thymeleaf. I want to show a form as in the image below: Hide form using Thymeleaf

Initially the pick up id column should show some text like 'edit' or 'n/a' with a link and when the user clicks on the link(or button) then only the edit box should be visible as in the image.

As you can see I have already created the form but I am having trouble with hiding the form and showing it only upon clicking a link or button and when user clicks on save, the id is saved to database(already done) and the entered id should be shown instead of the form. I searched a lot about it but could not find anything using thymeleaf. I had found some related answers using JavaScript/jQuery but I need Thymeleaf.

The relevant part of the code

    <td>
      <a><span th:if="${ticket.pickedUp} ? ${ticket.pickUpId} : 'N/A'"></span>
                                                        <form th:action="@{/updatePickupId/{id}(id=${ticket.id})}"
                                                            th:method="post" th:style="'display: hidden'">
                                                            <div class="checkbox-list w-150px">
                                                                <input type="text" name="pId" value=""
                                                                    placeholder="Pick Up Id"
                                                                    th:classappend="${ticket.pickedUp} ? 'required' : ''">
                                                                <input type="submit" value="Save"/>
                                                            </div>
                                                        </form>
                                                    </a>
    </td>

As you can see I have used th:style="'display: hidden'" in the form but I don't know why its not working and the form is visible all the time.