title: Thymeleaf foreach loop with button event inside
body: <p>I have used the Thymeleaf foreach to traverse all posts where each post has a "Comment" button. I would like to display the comment list after click this "Comment" button.</p>
  
  <p><a href="https://i.stack.imgur.com/1rbqh.jpg" rel="nofollow noreferrer">The default is hidden</a></p>
  
  <p>The following is my codes:</p>
  
  <pre><code>            &lt;div th:each="post:${posts}"&gt;
                  &lt;div class="panel panel-default" th:object="${post}"&gt;
                      &lt;div class="panel-body"&gt;
                          &lt;p th:text="*{user.username}"&gt;username&lt;/p&gt;
                          &lt;p th:text="*{createTime}"&gt;time&lt;/p&gt;
                          &lt;p th:text="*{content}"&gt;content&lt;/p&gt;
                          &lt;div&gt;
                              &lt;form th:action="@{/posts/liked/input}" method="post"
                                  style="display: inline"&gt;
                                  &lt;input type="hidden" name="postId" id="postIdId"
                                      class="form-control" th:value="*{id}"&gt;
                                  &lt;button type="submit" class="btn btn-primary"&gt;like&lt;/button&gt;
                              &lt;/form&gt;
                              &lt;button class="btn btn-primary commentBt"
                                  style="display: inline"&gt;Comment&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!--  This is the part I want to show after click Comment --&gt;
                      &lt;div style="display: none"&gt;
                          &lt;form th:action="@{/posts/comment/input}" method="post"&gt;
                              &lt;textarea class="form-control" name="content" id="contentId"
                                  rows="1"&gt;&lt;/textarea&gt;
                              &lt;input type="hidden" name="postId" id="postIdId"
                                  class="form-control" th:value="*{id}"&gt;
                              &lt;button type="submit" class="btn btn-primary"&gt;Reply&lt;/button&gt;
                          &lt;/form&gt;
                          &lt;div th:each="comment:*{comments}"&gt;
                              &lt;div th:object="${comment}"&gt;
                                  &lt;p th:text="*{content}"&gt;content&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>How to do this in the foreach loop?</p>