title: How to sync jquery sortable lists that contain cloned elements?
body: <p>I've a peculiar situation. I have two lists. 1 list contains all items, and 2 contains top list. Obviously items overlap, and items in the second list are marked with class clone-23 clone-25 according to which element from list 1 are they cloned from.</p>
  
  <pre><code>Example:
  List 1
  1 run
  2 eat
  3 drink
  4 play
  
  List 2 (TOP)
  1 run (class clone)
  2 eat (class clone)
  </code></pre>
  
  <p>When re-arranged data is saved to DB.</p>
  
  <p>I would like to avoid refresh and re-pulling of data from DB. So I would like to sync position of elements in two lists.
  So whenever user drags around item in list 1, list 2 automatically shows changed positions and vice versa.</p>
  
  <p>I initiate my sortable:</p>
  
  <pre><code>// Initiate jquery ui sortable
      $(".word-list").sortable({
          tolerance: 'pointer',
          cursor: 'move',
          forcePlaceholderSize: true,
          dropOnEmpty: true,
          connectWith: 'ol.word-list',
          //containment: "body",
          // 
          start: function(event, ui) {
              // Starting position of the word element
              //ui.item.startPos = ui.item.index();
              //console.dir(ui.item.startPos);
          },
          //
          stop: function(event, ui) {
              //
          },
          update: function(event, ui) {
              //
              save_word_order(this);
              //
          },
          out: function(event, ui) {
              //
          },
          over: function(event, ui) {
              //
          },
          placeholder: "ui-state-highlight"
      });
  </code></pre>
  
  <p>Clone element html:</p>
  
  <pre><code>&lt;li data-con-id="94" data-order-id="1" data-note="" class="ui-state-default clone-94"&lt;/li&gt;
  </code></pre>
  
  <p>Lists are simply:</p>
  
  <pre><code>&lt;ol id="tabs-1" class="word-list"&gt;&lt;/ol&gt;
  &lt;ol id="tabs-2" class="word-list"&gt;&lt;/ol&gt;
  </code></pre>
  
  <p>Any thoughts?</p>