Как сортировать и создавать несколько текстовых полей с помощью jQuery UI?

Сценарий:. Я хочу, чтобы мои пользователи могли создавать список покупок, перетаскивая продукты в список с возможностью выбора и сортировки. В зависимости от местоположения продукта в списке и значения продукта текстовые поля для этой формы должны быть заполнены.

jsFiddle: http://jsfiddle.net/imjp/5NWAQ/1/

Например:

• Orange
• Apple,
• Banana

Создает следующие значения в моих полях формы (на основе, конечно, data-product attribute):

• item_1: orange
• item_2: apple
• item_3: banana

Если я переведу яблоко, поля также должны обновить это.

Вот некоторые html, которые я собрал:

<div class="demo">

<div id="products">
<h1 class="ui-widget-header">Products</h1>    
<div id="catalog">
    <h3><a href="#">T-Shirts</a></h3>
    <div>
        <ul>
            <li data-product="Lolcat Shirt">Lolcat Shirt</li>
            <li data-product="Cheezeburger Shirt">Cheezeburger Shirt</li>
            <li data-product="Buckit Shirt">Buckit Shirt</li>
        </ul>
    </div>
    <h3><a href="#">Bags</a></h3>
    <div>
        <ul>
            <li>Zebra Striped</li>
            <li>Black Leather</li>
            <li>Alligator Leather</li>
        </ul>
    </div>
    <h3><a href="#">Gadgets</a></h3>
    <div>
        <ul>
            <li>iPhone</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    </div>
</div>
</div>

<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
    <ol>
        <li class="placeholder">Add your items here</li>
    </ol>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
    <ol>
        <li class="placeholder">Add your items here</li>
    </ol>
</div>
</div>


<div id="list_1" style="clear: both; float: left;">
  <h3>List 1</h3>
<input id="list_1_item_1" type="text">
<input id="list_1_item_2" type="text">
</div>

 <div id="list_2" style="clear: both; float: left;">
      <h3>List 2</h3>
  <input id="list_2_item_1" type="text">
 <input id="list_2_item_2" type="text">
 </div>
 </div><!-- End demo -->

javascript (Имейте в виду, что код javascript не работает так, как я хочу, он обновляет все поля с одинаковым значением):

$( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
        appendTo: "body",
        helper: "clone"
    });
    $( "#cart ol" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            $( this ).find( ".placeholder" ).remove();
            console.log(ui.draggable.length);
    $('#list_1_item_1').val(ui.draggable.data('product')); 
    $('#list_1_item_2').val(ui.draggable.data('product')); 

    $('#list_2_item_1').val(ui.draggable.data('product')); 
    $('#list_2_item_2').val(ui.draggable.data('product')); 
            $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            // gets added unintentionally by droppable interacting with sortable
            // using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
            $( this ).removeClass( "ui-state-default" );
        }
    });