title: How to add jQuery show/hide function inside forloop?
body: <p>I want to add a jQuery <strong>show/hide</strong> function to my website. The <a href="http://www.w3schools.com/jquery/jquery_hide_show.asp" rel="nofollow noreferrer">usual</a> show/hide function works but mine is a bit more complex than the usual one.</p>
  
  <p>The "hide div" and the the div I want to hide/show on click are inside a for-loop and there are tons of divs with this names. I can add specific ids for each div (programmatically) but I couldn't add this name inside JavaScript programmatically: I have to add them manually.</p>
  
  <p><strong>This is the piece of code I want to add the function:</strong></p>
  
  <pre><code>{% for facet in facets %}
      &lt;div class="block-title"&gt; {{ facet.name }} &lt;div id="hide"&gt;HIDE&lt;/div&gt;&lt;/div&gt;
          &lt;ul class="term-list"&gt;
              {% for stat in stats %}
                  &lt;li class="term-item&gt;{{ stat.name }}&lt;/li&gt;
              {% endfor %}
          &lt;/ul&gt;
  {% endfor %}
  </code></pre>
  
  <p><br>
  <strong>And this is the show/hide function:</strong></p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
      $("#hide").click(function(){
          $(".term-list").hide();
      });
      $("#show").click(function(){
          $(".term-list").show();
      });
  });
  &lt;/script&gt; 
  </code></pre>
  
  <p><br>
  When I click on the hide button, it hides each and every <code>.term-list</code> divs as expected.</p>
  
  <p><strong>I tried two methods but couldn't be successful:</strong></p>
  
  <ol>
  <li>I added a number to <code>#hide</code> and <code>.term-list</code> divs (with forloop), it becomes: <code>#hide1</code> and <code>.term-list1</code>, <code>#hide2</code> and <code>.term-list2</code>, ... But I couldn't add a working for-loop to JavaScript code.</li>
  <li>I tried to hide only the following (next) <code>.term-list div</code> when click to <code>#hide</code> but the <code>next()</code> and <code>nextAll()</code> <a href="https://stackoverflow.com/questions/30281166/jquery-this-this-next-next-works-but-this-next-div-does-not">functions</a> didn't work.</li>
  </ol>
  
  <p><br>
  So, <strong>what should I do to add jQuery show/hide function inside this for-loop?</strong></p>