title: Using jquery and thymeleaf how do I create dynamic buttons each with their own event listener
body: <p>My goal is to build a dynamic FAQ page where the questions are visible, and when you click on the said question the div with the answer would appear. Once you click the div again it would toggle again.
  I've tried a few things and the best result I've accomplished was toggling the first question's answer regardless of what question was clicked.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns:th=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
  &lt;head&gt;
      &lt;link href=&quot;./img/favicon.png&quot; rel=&quot;shortcut icon&quot;/&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;meta content=&quot;width=1280, maximum-scale=1.0&quot; name=&quot;viewport&quot;/&gt;
      &lt;link  th:href=&quot;@{css/faq.css}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
      &lt;link  th:href=&quot;@{css/faq-new.css}&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  &lt;/head&gt;
  &lt;body style=&quot;margin: 0;
   background: rgba(255, 255, 255, 1.0);&quot;&gt;
  &lt;input id=&quot;anPageName&quot; name=&quot;page&quot; type=&quot;hidden&quot; value=&quot;faq&quot;/&gt;
  &lt;div class=&quot;faq&quot;&gt;
      &lt;th:block th:insert=&quot;_header.html :: header&quot;&gt;&lt;/th:block&gt;
      &lt;div class=&quot;rectangle2&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;justaskus&quot;&gt;
          Just Ask Us
      &lt;/div&gt;
  
      &lt;!-------========= FAQ =========-------------&gt;
      &lt;div class=&quot;faq-container&quot;&gt;
          &lt;div class=&quot;th-start&quot; th:block th:each=&quot;faqType, stats : ${faqTypeDaoList}&quot;&gt;
              &lt;div class=&quot;q-type-wrapper&quot;&gt;
                  &lt;div class=&quot;type-header&quot;&gt;
                      &lt;h4 th:text=&quot;${faqType.faqTypeName}&quot;&gt;&lt;/h4&gt;
                  &lt;/div&gt;
  
                  &lt;!----========= Question ========---------&gt;
                  &lt;div class=&quot;th-wrap&quot; th:each=&quot;question, stat: ${faqTypeDaoList[_${stats.index}_].faqList}&quot;&gt;
  
                      &lt;a href=&quot;#&quot;&gt;
                          &lt;div id=&quot;box&quot; class=&quot;question-box&quot;&gt;
                              &lt;div class=&quot;bullet&quot;&gt;&lt;/div&gt;
                              &lt;img th:src=&quot;@{img/artboard-copy-3-unnamed-3@2x.png}&quot; class=&quot;arrow&quot;/&gt;
                              &lt;img th:src=&quot;@{img/artboard-copy-3-unnamed-13@2x.png}&quot; class=&quot;unnamed&quot; style=&quot;display:none;&quot;/&gt;
                              &lt;div class=&quot;questions&quot; th:text=&quot;${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].question}&quot;&gt;&lt;/div&gt;
                              &lt;div id=&quot;answers&quot; class=&quot;dropdown-answer&quot; th:text=&quot;${faqTypeDaoList[_${stats.index}].faqList[${stat.index}_].answer}&quot;&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-1.11.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      $(document).ready(function() {
  
          $('#box').on(&quot;click&quot;, ()=&gt; {
              $(this).children[3].toggle();
          });
  
  
      });
  &lt;/script&gt;
  </code></pre>
  <p>That is my current code and it does absolutely nothing. Here are a few attempts I took</p>
  <pre><code>/* One attempt */
  $('.questions').on(&quot;click&quot;,function(){
          // &quot;this&quot; in $(this) --&gt; means the current clicked element
          // .find() will search the CHILDREN of the clicked element with the class &quot;sub-nav&quot;
          $(this).find(&quot;dropdown-answer&quot;).toggle();
        });
  
  /* Another attempt. This one toggled only the first question's answer regardless if what button was clicked. */
  var click = document.getElementById(&quot;dropdown-answer&quot;);
      if(click.style.display === &quot;none&quot;) {
          click.style.display = &quot;block&quot;;
      }
      else {
          click.style.display = &quot;none&quot;;
      }
  </code></pre>
  <p>Is this even possible?</p>