jquery - Cloned div with sortable table allows dragging but not sorting -

i have web form in when need add div blocks dynamically. within div blocks lives sortable table of items. doing add of div , it's children calling clone() on last div, fixing inputs needed (code admitted since irrelavent test). , appending newly cloned div last div's parent. however, no matter try, unable newly cloned div w/ child table sortable it's predicessor.

i have setup following test showing problem @ jsfiddle.

and not able see jsfiddle, here relavent bits try:

the html part:

<div>     <div class="inner">         <input name="one" value="something" />         <table>             <tbody>                 <tr>                     <td>first</td>                     <td>                         <input name="row1" value="1" />                     </td>                 </tr>                 <tr>                     <td>second</td>                     <td>                         <input name="row2" value="2" />                     </td>                 </tr>                 <tr>                     <td>third</td>                     <td>                         <input name="row3" value="3" />                     </td>                 </tr>                 <tr>                     <td>fourth</td>                     <td>                         <input name="row4" value="4" />                     </td>                 </tr>             </tbody>         </table>     </div>     <br/> </div> <input type="button" id="button" value="add" /> 

and jquery part

$(document).ready(function () {     $('div.inner table tbody').sortable({         stop: function () { /* code reset row numbers */         }     });      $('#button').click(function(event) {         var newinnerdiv = $('div.inner:last').clone(true,true);          // clean inputs          // append new item type parent of existing 1         $(newinnerdiv).appendto($('div.inner:last').parent());          // renumber inputs          // if make re-sortable, new table doesn't work         $(newinnerdiv).sortable();     }); }); 

is there way re-apply sortability of newly cloned table? using jquery 1.7.1 , jquery ui 1.8.13.

clone table without data , events (cloning events means rows of new table want sorted old table), make table sortable instead of original div. (you can chain methods convenience.)

    var newinnerdiv = $('div.inner:last').clone(false,false)         .appendto($('div.inner:last').parent())         .find('tbody').sortable(); 

http://jsfiddle.net/mblase75/2d6g9/

you can replace .appendto($('div.inner:last').parent()) .insertafter('div.inner:last') nearly same result (you have <br> in there well, changes position depending on code use).