title: X and Y Positions of multiple jQuery UI Elements
body: <p>im trying to collect the positions of multiple draggable elements using jQuery UI.</p>
  
  <p>At the moment I can get the position of one element, but when I move around another, both positions change. </p>
  
  <p>Please can someone assist me in getting the separate positions of multiple draggable items.</p>
  
  <p><a href="http://codepen.io/anon/pen/nLGIl" rel="nofollow">http://codepen.io/anon/pen/nLGIl</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="dragThis" id="box-1"style="top: 100px; left: 50px;" &gt;
    &lt;h2&gt;Test 1&lt;/h2&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
    &lt;ul&gt;
      &lt;li class="posX"&gt;&lt;/li&gt;
      &lt;li class="posY"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div class="dragThis" id="box-1" style="top: 50px; left: 100px;" &gt;
    &lt;h2&gt;Test 2&lt;/h2&gt;
    &lt;p&gt;This is a test&lt;/p&gt;
    &lt;ul&gt;
      &lt;li class="posX"&gt;&lt;/li&gt;
      &lt;li class="posY"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.dragThis {
      min-width: 50px;
      max-width: 300px;
      min-height: 50px;
      max-height: 400px;
      overflow: auto;
      padding: 10px;
  
      background: #efefef;
      border: 3px solid #ccc;
      border-radius: 10px;
  
      display: inline-block;
  
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 0;
  }
  
  .dragThis h2 {
      font-size: 20px;
      margin: 0;
      padding: 0;
  }
  
  .dragThis ul {
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .top {z-index: 2; position: relative}
  .bottom {z-index: 1; position: relative}
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function() {
      var a = 3;
  
      $('.dragThis').draggable(
      {
          start: function(){
              $(this).css("z-index", a++);
          },
          drag: function(){
              var offset = $(this).offset();
              var xPos = offset.left;
              var yPos = offset.top;
              $('.posX').text('x: ' + xPos);
              $('.posY').text('y: ' + yPos);
          }
      });
  
      $('.dragThis').click(function(){
        $(this).addClass('top').removeClass('bottom');
  
          $(this).siblings().removeClass('top').addClass('bottom');
          $(this).css("z-index", a++);
      });
  
  });
  </code></pre>