jquery-ui - jQuery UI のドラッグ可能な元に戻す

Question

動的に生成された 4 つのテーブルがあります。各セル (td) には 2 つの div があります。すべての div はドロップ可能です。理由はわかりませんが、2 番目の div のみがドラッグ可能を受け入れ、最初の div はそれを元に戻します。2 つの div に違いはありません (「点線」クラスを除く)。

ここに jsbin があります: http://jsbin.com/OMIbOGU/22/edit

JS

$("document").ready(function(){

  function init(){
    var table = $("<table></table>");
    $("body").append(table);
    for(var i=0 ;i < 9; i++){
      var row = $("<tr></tr>");
      var cell =  $("<td></td>");
      for(var j = 0;j<2;j++){
        var slot = $("<div></div>").addClass('slot');

        slot.droppable({
          accept: ".unassigned"
        });

        if (j!==1)
          slot.addClass("dotted");
        cell.append(slot);
      }
      row.append(cell);    
      table.append(row);

    }

    $(".unassigned").draggable({
      revert: "invalid",
      snap: "td div"
    });
  }
  for(var i = 0 ; i<4;i++)
  init();
});