title: How do I avoid multiple jquery dropdown boxes interfering with eachother
body: <p>I need to know how to alter my code to have multiple dropdowns work on the same page. The number of dropdowns on the page will vary because they are dynamically created from a database. Their function is provided by jquery. I would like each dropdown to work independently from the others.</p>
  
  <p>Code is below but not sure if I should post eh css as it's really long so here is the link to my fiddle: <a href="http://jsfiddle.net/Pj5rE/" rel="nofollow">http://jsfiddle.net/Pj5rE/</a></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>    &lt;div class="wrapper-demo"&gt;
      &lt;div id="dd" class="wrapper-dropdown-2" tabindex="1"&gt;Dropdown
          &lt;ul class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper-demo"&gt;
      &lt;div id="dd" class="wrapper-dropdown-2" tabindex="1"&gt;Dropdown
          &lt;ul class="dropdown"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript:</p>
  
  <pre><code>    function DropDown(el) {
      this.dd = el;
      this.initEvents();
  }
  DropDown.prototype = {
      initEvents : function() {
          var obj = this;
  
          obj.dd.on('click', function(event){
              $(this).toggleClass('active');
              event.stopPropagation();
          }); 
      }
  }
  
  $(function() {
      var dd = new DropDown( $('#dd') );
          $(document).click(function() {
              // all dropdowns
          $('.wrapper-dropdown-2').removeClass('active');
          });
  
  });
  </code></pre>
  
  <p>I'm pretty new to programming and javascript so I hope that all made sense. Help in full or in part is much appreciated, thank you!</p>