JQuery сортируемый shift-клон с выходным объектом

Эй, устрашающие проблемы, вот проблема, с которой мне нужна помощь:

У меня есть несколько списков, которые я использую JQuery Sortable для сортировки, а затем вывод объекта измененного списка. Одна из функций, с которой мне нужна помощь, - это копирование с одного экземпляра в другой. Это сохранит исходный текст в этом списке, а затем поместит элемент клона в новый список, где он был удален.

До сих пор не было слишком много проблем. Но когда я создаю объект для вывода, он редко совпадает с тем, что мы визуально видим на экране. Элементы списка не находятся в правильном порядке, а иногда есть дополнительные копии клонированного элемента списка.

Вот сценарий JS:

<ul  class="sortable" data-name="List 1">
    <p>List 1</p>
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>

<ul  class="sortable" data-name="List 2">
    <p>List 2</p>
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
  <li class="ui-state-default">Item 6</li>
  <li class="ui-state-default">Item 7</li>
</ul>
<p style="clear: both">Output Object</p>
<div id="output"></div>

Вот Javascript/jquery:

$(function() {
    $( ".sortable" ).sortable({

        connectWith: ".sortable",

            activate: function (event, ui) {
            if (event.shiftKey == true) {
            $('body').css('cursor', 'copy');
                }
            },

            stop: function(event, ui) {
            if (event.shiftKey == true) {
                return false;
                }
            },

            receive: function(event, ui) {
            if (event.shiftKey == true) {
                ui.item.clone().appendTo($(this)); 
                }
            },

            update: function(event, ui) {
            sendList(ui.item.closest('ul'));
            },


    });<!-- end Jquery Sortable -->
  });<!-- end function -->

 // function for output
 function sendList(list) {
        var listArray = [];
        var ulObject={};

     // iterate through the list and push html into array
        list.find('li').each(function(index, element) {
            listArray.push( $(this).html() );
        });

     // update object
        ulObject = {
            "List Name" : list.attr('data-name'),
            "List Items" : listArray
        }

    console.log(ulObject);
        $('#output').html("").append( JSON.stringify(ulObject, "", "\r\n" ));

    }

И для эстетики: CSS:

.sortable { list-style-type: none; margin: 1em; padding: 0; width: 30%; float: left;}
.sortable li { margin: 3px; padding: 0.4em; height: 12px; }
#output {clear:both; border: thin solid black; padding: 1em; margin: 1em; width: 60%; min-height: 250px}
p {clear:both; margin-left: 1em;}