title: jQuery Toggle with For Loop
body: <p>Here's my HTML,</p>
  
  <pre><code>{% for loop several times %}
  
  &lt;a href="#" class="showhide"&gt;Button&lt;/a&gt;&lt;br /&gt;
  &lt;div class="dropdown"&gt;
      &lt;a href="#"&gt;Update&lt;/a&gt;
      &lt;a href="#"&gt;Delete&lt;/a&gt;
  &lt;/div&gt;
  
  {% endfor %}
  </code></pre>
  
  <p>Also,</p>
  
  <pre><code>$(document).ready(function () {
  $('.showhide').click(function() {
      $('.dropdown').toggle();
  });
  });
  $(document).mouseup(function(e) {
  var container = $(".dropdown");
  if(container.is(':visible')&amp;&amp;!$(e.target).closest('.dropdown').length){
      container.hide();}
  });
  });
  </code></pre>
  
  <p>Divs are opening &amp; closing fine. But the problem is that since I've a for loop, "Button" is appearing several times on one screen &amp; if I'm clicking on just one button all other buttons also opening &amp; closing the the divs with just one click. </p>
  
  <p>How can I make them separately open the divs?</p>