title: jQuery sort elements using data id
body: <p>I have an HTML structure as follows:</p>
  
  <pre><code>&lt;div class="clist"&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to sort them as:</p>
  
  <pre><code>&lt;div class="clist"&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
      &lt;div data-sid=1&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
      &lt;div data-sid=2&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using the following function:</p>
  
  <pre><code>function sortContacts() {
      var contacts = $('div.clist'), cont = contacts.children('div');
  
      cont.detach().sort(function(a, b) {
          var astts = $(a).data('sid');
          var bstts = $(b).data('sid')
          return (astts &gt; bstts) ? (astts &gt; bstts) ? 1 : 0 : -1;
      });
  
      contacts.append(cont);
  }
  </code></pre>
  
  <p>It is not working as expected.</p>
  
  <p>It is working well for the first run but after adding new element or changing the <code>data-sid</code> attributes it no longer works.</p>
  
  <p>Demo: <a href="http://jsfiddle.net/f5mC9/1/" rel="noreferrer">http://jsfiddle.net/f5mC9/1/</a></p>
  
  <p>Not working?</p>