title: Arrange Dom Element based on "order" attribute assigned
body: <p>I'm adding order property to the list based on order user selects the options. Once order attribute is added html looks like follow</p>
  <pre><code>&lt;nav class=&quot;navigation&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;ul&gt;
                &lt;li class=&quot;li1&quot; order=&quot;999&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;
                  list1
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;li2&quot; order=&quot;1&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list2
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;li3&quot; order=&quot;2&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list3
                  &lt;/a&gt;
                &lt;/li&gt;
      &lt;li class=&quot;li4&quot;&gt;
                  &lt;a href=&quot;#&quot; order=&quot;999&quot;&gt;
                  list4
                  &lt;/a&gt;
                &lt;/li&gt;
      &lt;li class=&quot;li5&quot; order=&quot;3&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list5
                  &lt;/a&gt;
                &lt;/li&gt;
      &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  <p>browser shows as(ul has display flex):
  list2
  list3
  list5
  list1
  list4</p>
  <p>I want to rearrange DOM based on the order not sure how to do it using jquery:</p>
  <pre><code>&lt;nav class=&quot;navigation&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;ul&gt;
                
                &lt;li class=&quot;li2&quot; order=&quot;1&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list2
                  &lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;li3&quot; order=&quot;2&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list3
                  &lt;/a&gt;
                &lt;/li&gt;
  &lt;li class=&quot;li5&quot; order=&quot;3&quot;&gt;
                  &lt;a href=&quot;#&quot;&gt;
                  list5
                  &lt;/a&gt;
                &lt;/li&gt;
  &lt;li class=&quot;li1&quot; order=&quot;999&quot;&gt;
                  &lt;a href=&quot;#&quot; class=&quot;active&quot;&gt;
                  list1
                  &lt;/a&gt;
                &lt;/li&gt;
      &lt;li class=&quot;li4&quot;&gt;
                  &lt;a href=&quot;#&quot; order=&quot;999&quot;&gt;
                  list4
                  &lt;/a&gt;
                &lt;/li&gt;
      
      &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>