Jquery resetting a nested sortable

Question

I'm currently working with jquery sortables and I've been stumped by this problem for the past day. I'm looking to create a nested sortable where children within each parent aren't connected to other parents (some parents being empty). I've added features that allow for the deletion of parents and children. Both the parent and children are from different classes.

However, I would like to add a reset feature where the user can click a button to reset the position of the sortable (both parents and children) to its original state (like a page refresh).

However, I've tried multiple solutions and I can't see to find a way to cache the initial state of both parents and children and refresh the list.

This is what I've tried (caching parent sortable and refreshing) but upon reset, the children are no longer sortable. I have no clue why this would be.

$(document).ready(function(){
$(".parent").sortable({
    containment: "document",
    items: "> div",
    tolerance: "pointer",
    cursor: "move",
    opacity: 0.7,
    revert: 300,
    delay: 150,
    placeholder: "movable-placeholder",
    start: function(e, ui) {
        ui.placeholder.height(ui.helper.outerHeight());
    }
}).on('click', '.delete', function() {
$(this).closest('div').remove();
    });
$(".group-items").sortable({
    items: "> div",
    tolerance: "pointer",
    containment: "parent",
    placeholder: "movable-placeholder-child"
});
var cache = $('.parent').html();
$("#reset").click(function(){
$(".parent").html(cache).sortable("refresh");
});

})

jsfiddle link if you want to have a better idea:

http://jsfiddle.net/3kdSZ/641/