title: jQuery Multiple sortable save to database
body: <p>I have found a few examples of sortable and being able to save to a database, however i want to sort multiple list items and then save to the database.</p>
  
  <p>I have tried to edit the code below to allow this, however i am stuck. I can move multiple items, but its only recognising the move of a single item, so presume i need to do some kind of foreach item moved but struggling.</p>
  
  <p>Also, i have found a bug in the code below and cant seem to fix it. If i highlight an item(s) and drag them to the in-between the boxes, they just disappear and do not appear an either list.</p>
  
  <p>Another thing i am trying to do is remove the .selected class on the selected items once the move is completed, again i am unable to do this.</p>
  
  <pre><code>&lt;ul id='sortable1' class='connectedSortable'&gt;
    &lt;li id='item1'&gt;Item 1&lt;/li&gt;
    &lt;li id='item2'&gt;Item 2&lt;/li&gt;
    &lt;li id='item3'&gt;Item 3&lt;/li&gt;
    &lt;li id='item4'&gt;Item 4&lt;/li&gt;
    &lt;li id='item5'&gt;Item 5&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id='sortable2' class='connectedSortable'&gt;
    &lt;li id='item6'&gt;Item 6&lt;/li&gt;
    &lt;li id='item7'&gt;Item 7&lt;/li&gt;
    &lt;li id='item8'&gt;Item 8&lt;/li&gt;
    &lt;li id='item9'&gt;Item 9&lt;/li&gt;
    &lt;li id='item10'&gt;Item 10&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;ul id='sortable3' class='connectedSortable'&gt;
    &lt;li id='item11'&gt;Item 11&lt;/li&gt;
    &lt;li id='item12'&gt;Item 12&lt;/li&gt;
    &lt;li id='item13'&gt;Item 13&lt;/li&gt;
    &lt;li id='item14'&gt;Item 14&lt;/li&gt;
    &lt;li id='item15'&gt;Item 15&lt;/li&gt;
  &lt;/ul&gt;
  
  $(".connectedSortable li").click(function() {
      $(this).toggleClass("selected");
  });
  $("ul.connectedSortable").sortable({
      connectWith: "ul.connectedSortable",
      start: function(e, info) {
          info.item.siblings(".selected").appendTo(info.item);
      },
      stop: function(e, info) {
          info.item.after(info.item.find("li"))
      },
  
      update: function () {
          var order1 = $('#sortable1').sortable('toArray').toString();
          var order2 = $('#sortable2').sortable('toArray').toString();
          var order3 = $('#sortable3').sortable('toArray').toString();
  
          alert("Order 1:" + order1 + "\n Order 2:" + order2 + "\n Order 3:" + order3); //Just showing update
          $.ajax({
              type: "POST",
              url: "/echo/json/",
              data: "order1=" + order1 + "&amp;order2=" + order2 + "&amp;order3=" + order3,
              dataType: "json",
              success: function (data) {
  
              }
          });
      }
  });
  </code></pre>
  
  <p>I have created a jsFiddle: <a href="https://jsfiddle.net/MarcellusWallis/d8exp006/1/" rel="nofollow noreferrer">https://jsfiddle.net/MarcellusWallis/d8exp006/1/</a></p>