title: jQuery UI Sortable - update item data-id attribute
body: <p>Suppose I have the following sortable object:</p>
  
  <pre><code>&lt;ul class="photos ui-sortable"&gt;
      &lt;li class="photo" data-id="1"&gt;&lt;/li&gt;
      &lt;li class="photo" data-id="2"&gt;&lt;/li&gt;
      &lt;li class="photo" data-id="3"&gt;&lt;/li&gt;
      &lt;li class="photo" data-id="4"&gt;&lt;/li&gt;
      &lt;li class="photo" data-id="5"&gt;&lt;/li&gt;
      &lt;li class="photo" data-id="6"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Upon sorting, the <code>data-id</code> attribute of all the items need to be updated with their new positions.</p>
  
  <p>I tried this:</p>
  
  <pre><code>$('.photos').sortable({
      stop: function(event, ui){
          $(ui.item).attr('data-id', ui.item.index()+1);
      }
  });
  </code></pre>
  
  <p>But it only updates the data-id of the item that was moved, and not the others. How can I do this?</p>