title: swap elements by comparing data attribute in jquery
body: <p>I have multiple div elements with <code>data-timestamp</code> attribute</p>
  
  <p>What I want to do is sort these <code>div</code>s by <code>data-timestamp</code> (newer to older). 
  I decided to loop through elements and swap their positions.  If an element's next sibling has a newer <code>data-timestamp</code> than the current element, then next sibling inserts before current. </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>$.each($('.sorted-chat-item'), function( i, value ) {
          //current element's timestamp
          var date = new Date($(value).attr('data-timestamp'));
          //all elements
          var list = $('.sorted-chat-item');
  
          for(var j = i+1; j &lt; list.length; j++){
              //next element's timestamp
              var nextDate = new Date($(list[j]).attr('data-timestamp'));
              if(date &lt; nextDate){
                  $(list[j]).insertBefore( $(list[i]) );
              }
          }
      });</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='sorted-chat-item' data-timestamp="2017-09-01 18:09:22"&gt;2017-09-01 18:09:22&lt;/div&gt;
  &lt;div class='sorted-chat-item' data-timestamp="2017-09-01 18:01:27"&gt;2017-09-01 18:01:27&lt;/div&gt;
  &lt;div class='sorted-chat-item' data-timestamp="2017-09-01 18:31:36"&gt;2017-09-01 18:31:36&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but it doesn't sort correctly. Any idea, what am I doing wrong?</p>