title: jquery-ui connected lists append output to textarea
body: <p>So I don't really know what I am doing when it comes to jQuery, and I pieced this script together. What I am trying to do is have three jquery-ui lists to be connected, which works, then capture the content of each list individually. I only actually need #sortableEquipmentDay and #sortableEquipmentNight. However if you look at the jsFiddle I included you'll see that moving items into the lists gives some random output and not the id's of the two lists as I'm looking for.</p>
  
  <p>Also .append doesn't appear to clear old data but just adds onto the text inside the text area. </p>
  
  <p>Any help would be awesome!</p>
  
  <pre><code>javaScript:
      $(function() {
          var lists = $( "#EquipmentPool, #sortableEquipmentDay, #sortableEquipmentNight" ).sortable({
              connectWith: 'ul.droptrue',
  
      update: function() {
              lists.each(function(){
  
          var DayShift = $("#sortableEquipmentDay").sortable("toArray");
          var Nightshift = $("#sortableEquipmentNight").sortable("toArray");
  
              $("#out1").append( DayShift.join(','));
              $("#out2").append( Nightshift.join(','));        
  
              });
  
          }
  
      }).disableSelection();
  }); 
  </code></pre>
  
  <p><a href="http://jsfiddle.net/EsnLs/84/" rel="nofollow">http://jsfiddle.net/EsnLs/84/</a></p>