title: Trying to rate multiple elements towards mouse pointer
body: <p>I am trying to rotate multiple elements towards my mouse cursor. It seems like it is working, but they all rotate in the same direction and not particular towards my mouse. I assume one of them does follow my mouse and the rest of them just have the same angle as that one.</p>
  
  <p>How can I rotate then all seperately towards my mouse? Am I doing something wrong?</p>
  
  <p>Could someone explain me how to make them both point towards my mouse?</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>$(function() {
    $('.js-follow-mouse').followMouse();
  });
  
  $.fn.followMouse = function() {
    return $(this).each(function(index, item) {
      item = $(item);
      if (!item.data('FollowMouse')) {
        item.data('FollowMouse', new FollowMouse(item));
      }
    });
  };
  
  var FollowMouse = function(element) {
    this.element = element;
    mousePos = {
      x: -1,
      y: -1
    };
    $('body').on('mousemove', this.rotateObject.bind(this));
  };
  
  FollowMouse.prototype.rotateObject = function() {
    mousePos.x = event.pageX;
    mousePos.y = event.pageY;
    var curPos = {
      x: $('img').offset().left,
      y: $('img').offset().top
    };
    var nextPos = {
      x: mousePos.x,
      y: mousePos.y
    };
    $(this.element).find('img').each(function() {
      offsetLeft = mousePos.x - $(this).offset().left;
      offsetTop = mousePos.y - $(this).offset().top;
      deg = (Math.atan2(nextPos.y - curPos.y, nextPos.x - curPos.x) * 180 / Math.PI);
      $(this).css({
        '-webkit-transform': 'rotate(' + deg + 'deg)',
        '-moz-transform': 'rotate(' + deg + 'deg)',
        '-ms-transform': 'rotate(' + deg + 'deg)',
        '-o-transform': 'rotate(' + deg + 'deg)',
        'transform': 'rotate(' + deg + 'deg)'
      });
    });
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.pencil img { 
    height: 5px;
    width: 20px;
    background-color: #000000;
  }
  .pencil-2 {
    margin-left: 150px
  }
  body { 
    width: 100vw;
    height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="js-follow-mouse"&gt;
    &lt;div class="pencil"&gt;&lt;img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""&gt;&lt;/div&gt;
    &lt;div class="pencil pencil-2"&gt;&lt;img src="http://i616.photobucket.com/albums/tt244/Sheol00/Photoshop/MenuBar3.png" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>