title: Jquery UI sortable order for two different containers while DRAG and DROP
body: <p>I have two different containers for my video editor. One container is used for maintaining the video thumbnails those are uploaded by the users. I have done a drag and drop inside the same container and updated the orders in DB for my future by using the following script</p>
  
  <pre><code>    &lt;script src="jquery/jquery-ui-1.8.custom.min.js"&gt;&lt;/script&gt;
  
       &lt;script type="text/javascript"&gt;
                  $(document).ready(function() {
                      j$132('#page .sortable-list').sortable({
                          update: function(event, ui) {
                              var order = [];
                              $('#image-list li').each(function(e) {
                                  order.push($(this).attr('id') + '=' + ($(this).index() + 1));
                              });
                              var positions = order.join(';')
                          },
                          connectWith: '#page .sortable-list',
                          placeholder: 'placeholder',
                      });
                  });
              &lt;/script&gt;
  &lt;ul id="image-list" class="sortable-list"&gt;
  
                          &lt;/ul&gt;
  </code></pre>
  
  <p>But now my problem is have to maintain two different drag and drop containers with individual orders and also those should have interconnection between them.I have done the drag and drop but could not get the order ids individually.Those are getting conflict. </p>