title: jQuery sort function on dynamic data attribute
body: <p>I'm using the sort function to re-order my divs numerically (1-2-3)</p>
  
  <pre><code>function sortByShop_reOrder() {
     $('#store_list .store_item').sort(function(a, b) {
        return $(a).data('order') - $(b).data('order');
     }).appendTo('#store_list');
   }
  
  
  &lt;div id="store_list"&gt;
     &lt;div class="store_item store_item_11" data-order="1"&gt;1&lt;/div&gt;
     &lt;div class="store_item store_item_21" data-order="2"&gt;2&lt;/div&gt;
     &lt;div class="store_item store_item_22" data-order="3"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a ajax call that runs every 15 seconds: </p>
  
  <pre><code> $.ajax({
      type:"POST",
      url: "someURL",
      dataType: 'json',
      data: "data=random",
          success:function(data) {
            var array = data;
                $.each(array, function (i) {
                    var store_order = array[i]['store_order'];
                    var store_id = array[i]['store_id'];
                    $('.store_item_'+store_id).attr('data-order', store_order);
                });
            sortByShop_reOrder()
          }
  })
  </code></pre>
  
  <p>ARRAY (store_ids differ to my code below):
  <a href="https://i.stack.imgur.com/rLzMR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rLzMR.png" alt="enter image description here"></a></p>
  
  <p>this dynamically updates the data-order attribute value: </p>
  
  <pre><code>&lt;div id="store_list"&gt;
     &lt;div class="store_item store_item_11" data-order="1"&gt;1&lt;/div&gt;
     &lt;div class="store_item store_item_22" data-order="3"&gt;3&lt;/div&gt;
     &lt;div class="store_item store_item_21" data-order="2"&gt;2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when I rerun the sortByShop_reOrder() it does not re-order my divs (1-2-3) it just remains the same (1-3-2).</p>
  
  <p>Any ideas? Is the function not seeing the updated data-order value?</p>