title: Add list items in specific order
body: <p>I have two boxes, right and left. Right box contains list of items, and left is blank at beginning.</p>
  
  <p>I want to add items from right to left in specific order even if I click randomly on list items.</p>
  
  <p>And I don't want to rearrange all items every-times on left box after click on each list item.</p>
  
  <p>Currently I'm getting following output if I click randomly on list items:</p>
  
  <p><img src="https://i.stack.imgur.com/l2fvN.png" alt="enter image description here"></p>
  
  <p>But I want following output:</p>
  
  <p><img src="https://i.stack.imgur.com/TEFyy.png" alt="enter image description here"></p>
  
  <p>Following is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;My Example&lt;/title&gt;       
          &lt;script type="text/javascript" src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;         
              .container { width: 900px;margin: 0 auto; }
              .container ul li { border: 1px solid #000;border-radius: 5px;list-style: none outside none;margin-bottom: 10px;margin-right: 30px;padding: 5px; }
              .container ul li:hover { background-color: #F2FFF2;cursor: pointer; }
              div.left { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
              div.right { border:1px solid #000;border-radius: 5px;width: 350px;margin-right:15px;float:left;min-height:250px; }
          &lt;/style&gt;
      &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="left"&gt;
              &lt;ul&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="right"&gt;
              &lt;ul&gt;
                  &lt;li data-order="1" &gt;Item 1&lt;/li&gt;
                  &lt;li data-order="2" &gt;Item 2&lt;/li&gt;
                  &lt;li data-order="3" &gt;Item 3&lt;/li&gt;
                  &lt;li data-order="4" &gt;Item 4&lt;/li&gt;
                  &lt;li data-order="5" &gt;Item 5&lt;/li&gt;
                  &lt;li data-order="6" &gt;Item 6&lt;/li&gt;
                  &lt;li data-order="7" &gt;Item 7&lt;/li&gt;
                  &lt;li data-order="8" &gt;Item 8&lt;/li&gt;
                  &lt;li data-order="9" &gt;Item 9&lt;/li&gt;
                  &lt;li data-order="10" &gt;Item 10&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div style="clear:both;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          jQuery(document).ready(function() { 
              jQuery("div.right").delegate("ul li", "click", function() {             
                  jQuery("div.left ul").append(jQuery(this));
              });         
          });
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>