Double click problem

by lemon kazi

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

var lastClickTimeStamp = 0;
$('#list1').on('dblclick', '.item', function(event) {
  if (event.timeStamp > lastClickTimeStamp) {
    $('#list2').append(this);
  }
});
$('#list2').on('click', '.item', function(event) {
  lastClickTimeStamp = event.timeStamp + 100;
  $('#list1').append(this);
});