title: Add a function to every element that gets clientX
body: <p>I'm doing a drag and drop thing. When the user grabs the element I need to add an event listener for <code>dragenter</code> to every element. In that listener function I need it to get and save the <code>clientX</code> when the mouse moves over that element. The issue I'm having is it gets the mouse position of the first element and keeps the same one for every other element. How can I fix this?</p>
  <p>Code:</p>
  <pre><code>if(editor_children[i].nodeType != 3)
      {
          editor_children[i].addEventListener(&quot;dragenter&quot;, function(event){
              if(event.target.id !== e.target.id) event.target.className= event.target.className + &quot; highlight&quot;;
              position= event.clientX;
              last_over= event.target.id;
              console.log(&quot;Mouse: &quot; + e.clientX + &quot; Position: &quot; + position + &quot; Last Element: &quot; + last_over);
          })
          
          editor_children[i].addEventListener(&quot;dragleave&quot;, function(event){
              event.target.className= event.target.className.replace(' highlight', '');
          });
      }
  </code></pre>
  <p>Please no JS libraries.</p>