Double click problem

HTML

<p>
  - Double click an item in the first list it to the second list.<br/>
  - Single click an item in the second list to move it to the first list.<br/>
  <br/>
  <b>The problem:</b> When there are multiple items in the second list. Double click the first item.<br/>
  The first item will move back to the first list, but the second item will move to the bottom of the second list.<br/>
  <br/>
  I would expect because the double click happens on 2 different items that it doesn't trigger on the second item because that specific item was only clicked once. But it does. How do I fix this?
</p>

<div class="left">
  <ul id="list1">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
    <li class="item">Item 3</li>
    <li class="item">Item 4</li>
    <li class="item">Item 5</li>
    <li class="item">Item 6</li>
    <li class="item">Item 7</li>
    <li class="item">Item 8</li>
    <li class="item">Item 9</li>
    <li class="item">Item 10</li>
    <li class="item">Item 11</li>
  </ul>
</div>

<div class="left">
  <ul id="list2">
  </ul>
</div>

CSS

.left { float: left; }

.item { font-size: normal; }

JavaScript

$('.item').dblclick(function () {
  $(this).detach();
  $('#list2').append($(this));
  $(this).click(function () {
    $(this).detach();
    $('#list1').append($(this));
  });
});