title: how to run a function only for the clicked element and not for the whole class
body: <p>I am looking for a way to resize <strong>individually</strong> several div on a page (like a browser window, that you can resize from a bottom corner), keeping the same proportions/ratio. I made the code work for a class .handle and .dragger, but all the div with the same class are being modified at the same time, while I would like it to be executed <strong>only for the div we click on</strong>.</p>
  <p>Here is the code to resize that I'm working with:</p>
  <pre><code>    $(&quot;.handle&quot;).bind('mousedown', draggerDown);
      $(&quot;body&quot;).bind('mouseup', draggerUp);
  
      function calculateNewSize(size) {
          // {currHeight, currWidth, newHeight, newWidth, offsetX, offsetY}
          
          var newWidth;
          var newHeight;
  
          if (Math.abs(size.offsetX) &gt; Math.abs(size.offsetY)) {
              newWidth = size.currWidth + size.offsetX;
              newHeight = newWidth * (size.currHeight / size.currWidth);
          } else {
              newHeight = size.currHeight + size.offsetY;
              newWidth = newHeight * (size.currWidth / size.currHeight);
          }
  
          return {
              &quot;height&quot;: newHeight,
              &quot;width&quot;: newWidth
          };
      }
  
      function draggerDown() {
          event.stopPropagation();
          event.preventDefault();
  
          currentX = event.pageX;
          currentY = event.pageY;
          
          currentHeight = $(&quot;.dragger&quot;).height();
          currentWidth = $(&quot;.dragger&quot;).width();
  
          $(&quot;body&quot;).bind('mousemove', draggerMove);
      }
  
      function draggerMove() {
          var draggerElements = document.getElementsByClassName(&quot;dragger&quot;);
          for (var n = 0; n &lt; draggerElements.length; ++n) {
  
          var targetStyle = window.getComputedStyle(draggerElements[n], null);
          var newHeight = currentHeight + (event.pageY - currentY);
          var newWidth = currentWidth + (event.pageX - currentX);
          
          // AT THIS POINT, THE LOGIC COMES IN.
          // CUSTOMIZE 'calculateNewSize' function above
  
          var newSize = calculateNewSize({
              &quot;currHeight&quot;: currentHeight,
              &quot;currWidth&quot;: currentWidth,
              &quot;newHeight&quot;: newHeight,
              &quot;newWidth&quot;: newWidth,
              &quot;offsetX&quot;: (event.pageX - currentX),
              &quot;offsetY&quot;: (event.pageY - currentY)
          });
          
          currentHeight = newSize.height;
          currentWidth = newSize.width;
          
          newHeight = newSize.height;
          newWidth = newSize.width;
  
          // AT THIS POINT, THE LOGIC IS DONE.
          // SIZES SHOULD BE COOL NOW
  
          $(&quot;.dragger&quot;).css(&quot;height&quot;, newHeight + &quot;px&quot;);
          $(&quot;.dragger&quot;).css(&quot;width&quot;, newWidth + &quot;px&quot;);
          
          console.log($(&quot;.dragger&quot;).height());
  
          currentX = event.pageX;
          currentY = event.pageY;
      }
      }
      function draggerUp() {
          $(&quot;body&quot;).unbind('mousemove');
      }
  
  
        // tell the embed parent frame the height of the content
        if (window.parent &amp;&amp; window.parent.parent){
          window.parent.parent.postMessage([&quot;resultsFrame&quot;, {
            height: document.body.getBoundingClientRect().height,
            slug: &quot;xUAZ5&quot;
          }], &quot;*&quot;)
        }
  
        // always overwrite window.name, in case users try to set it manually
        window.name = &quot;result&quot;
  }
  
  </code></pre>
  <p>I am trying to do it with that methodology (from another project) but I don't really know if it could work with the previous code:</p>
  <pre><code>var u; 
  
  for(var i=1; i&lt;13; i++) {
      var specificClass= document.getElementsByClassName(&quot;class&quot;+i);
  
      for (u = 0; u &lt; specificClass.length; u++) {
          specificClass[u].addEventListener(&quot;click&quot;, thefunction);
      }
  }
  
  function thefunction(evenement) {
  //    alert(evenement.target.classList)
      var clickedElement = document.getElementsByClassName(evenement.target.classList);
      for (u = 0; u &lt; clickedElement.length; u++) {
          clickedElement[u].style etc.
      }
  }
  </code></pre>
  <p>In that case I would these two groups of class: handle1, handle2, handle3,... and  dragger1, dragger2, dragger3...</p>
  <p>Here is my simplified html body:</p>
  <pre><code>&lt;div class=&quot;draggableDiv dragger div1&quot;&gt;
    &lt;div class=&quot;handle&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;draggableDiv dragger div2&quot;&gt;
    &lt;div class=&quot;handle&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Any other methodology is very welcomed of course, this is only what I've been trying :)
  Let me know if you would need more details
  Thanks!</p>