title: Module overwrite previous attached window mouseup event
body: <p>I am currently working on a javascript module which open and close boxes, tooltip or similar, the function works great the only problem is when I call it twice on a page where the 'boxes' classes are different the window mouseup event will be overwritten and only one of the two module instances of boxes can now be closed after opening them.</p>
  
  <pre><code>var boxRevealer = (function () {
      var buttons;
      var boxes;
      var element;
      var drp_active = false;
  
      var boxConstruct = function (btns, bxs) {
          buttons = document.querySelectorAll(btns);
          boxes = document.querySelectorAll(bxs);
          boxEvents();
      };
  
      var boxEvents = function () {
          buttons.forEach(function (e) {
              e.addEventListener("click", function (ee) {
                  element = document.getElementById(e.getAttribute("data-drp"));
                  element.classList.toggle("displayn");
                  drp_active = true;
              });
          });
  
          window.addEventListener("mouseup", function (e) {
              if (drp_active === true) {
                  if (!e.target.classList.contains("filt_holy")) {
                      boxes.forEach(function (e) {
                          console.log("ELEMENT");
                          console.log(e);
                          e.classList.add("displayn");
                      });
                  }
              }
          }, false);
      };
  
      return {
          boxConstruct: boxConstruct,
          boxEvents: boxEvents
      };
  })();
  </code></pre>
  
  <p>Here is how i call the module</p>
  
  <pre><code>window.addEventListener("load", function(e){
     boxRevealer.boxConstruct(".head_drp_btn", ".head_drp"); 
     boxRevealer.boxConstruct(".mkt_drp_btn", ".mkt_drp"); 
  });
  </code></pre>
  
  <p>So my question is, should I always name the boxes the same, or is there a work around?</p>