title: Property change onmousedown not working with multiple elements
body: <p>I've tried to simplify the code as much as possible. What I'm trying to do is implement a way to resize some elements. To do so, I create a <code>&lt;div class="resize-on"&gt;</code> (it's the orange colored one) and then if you click and hold your mouse down and move then some action should happen like so</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Ui = {};
  
  Ui.Resizer = function (element) {
  
      this.isResizing = false;
  
      this.element = element;
  
      this.resizer = document.createElement("div");
      this.resizer.classList.add('resize-on');
      var toWrap = this.element;
      var parent = toWrap.parentNode;
      var next = toWrap.nextSibling;
      this.resizer.appendChild(toWrap);
      parent.insertBefore(this.resizer, next);
    
     this.resizer.onmousedown = function(event) {
          this.isResizing = true;
          console.log('onmousedown', this.isResizing);
      }.bind(this);
  
      document.querySelector("body").onmousemove = function(event) {
          if(this.isResizing) {
              console.log('onmousemove', this.isResizing);
          }
      }.bind(this);
      
      document.querySelector("body").onmouseup = function(event) {
          this.isResizing = false;
          console.log('mouse up');
      }.bind(this);
  };
  
  
  (function() {
      Array.prototype.forEach.call(
          document.querySelectorAll('.resizable'),
          function (element) {
              new Ui.Resizer(
                  element
              );
          }
      );
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.resize-on {
    background-color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
      &lt;div class="one"&gt;One&lt;/div&gt;
      &lt;div class="two resizable"&gt;two&lt;/div&gt;
      &lt;div class="three"&gt;three&lt;/div&gt;
      &lt;div class="four"&gt;four&lt;/div&gt;
      &lt;div class="five"&gt;five&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So this works fine.</p>
  
  <p>Now the problem is if I have multiple <code>resizable</code> elements it does not work. It then only works on the "last" one (in this case <code>&lt;div class="four resizable"&gt;four&lt;/div&gt;</code>) Why is that? </p>
  
  <p>The element <code>&lt;div class="two resizable"&gt;two&lt;/div&gt;</code> get's the mousedown but does not show the <code>onmousemove</code> anymore.</p>
  
  <p>It's the exact same code as above. Just added the <code>resizable</code> class to another HTML element. I can't understand why this doesn't work. Can anyone shed some light on this? Also what do I have to change to get it to work?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var Ui = {};
  
  Ui.Resizer = function (element) {
  
      this.isResizing = false;
  
      this.element = element;
  
      this.resizer = document.createElement("div");
      this.resizer.classList.add('resize-on');
      var toWrap = this.element;
      var parent = toWrap.parentNode;
      var next = toWrap.nextSibling;
      this.resizer.appendChild(toWrap);
      parent.insertBefore(this.resizer, next);
  
     this.resizer.onmousedown = function(event) {
          this.isResizing = true;
          console.log('onmousedown', this.isResizing);
      }.bind(this);
  
      document.querySelector("body").onmousemove = function(event) {
          if(this.isResizing) {
              console.log('onmousemove', this.isResizing);
          }
      }.bind(this);
  
      document.querySelector("body").onmouseup = function(event) {
          this.isResizing = false;
          console.log('mouse up');
      }.bind(this);
  };
  
  
  (function() {
      Array.prototype.forEach.call(
          document.querySelectorAll('.resizable'),
          function (element) {
              new Ui.Resizer(
                  element
              );
          }
      );
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.resize-on {
    background-color: orange;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
      &lt;div class="one"&gt;One&lt;/div&gt;
      &lt;div class="two resizable"&gt;two&lt;/div&gt;
      &lt;div class="three"&gt;three&lt;/div&gt;
      &lt;div class="four resizable"&gt;four&lt;/div&gt;
      &lt;div class="five"&gt;five&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>