jQuery Sortable refresh for cloned sections

by Akram kamal

HTML

<button id="new">Add New</button>
<form id="form">
    <div class="builder-section">
        <div class="section-content">
            <ul class="builder-elements">
                <div class="builder-element">Item 1</div>
                <div class="builder-element">Item 2</div>
                <div class="builder-element">Item 3</div>
            </ul>
        </div>
    </div>
    <div class="builder-section">
        <div class="section-content">
            <ul class="builder-elements">
                <div class="builder-element">Item 1</div>
                <div class="builder-element">Item 2</div>
            </ul>
        </div>
    </div>
    <div class="clone-section">
        <div class="section-content">
            <ul class="builder-elements">
                <div class="builder-element">Clone Item 1</div>
                <div class="builder-element">Clone Item 2</div>
            </ul>
        </div>
    </div>
</form>

CSS

#form {
    border:1px solid blue;
    padding:10px;
}
.builder-section {
    display:block;
    padding:10px;
    border:2px dashed green;
    margin-bottom:10px;
}
.builder-elements {
    margin: 0;
    padding: 0;
    min-height:2em;
}
.builder-element {
    background:#f5f5f5;
    border:1px solid #ccc;
    padding:5px;
    margin: 0 0 5px;
}
.clone-section {
    display: none;
}

JavaScript

$('.builder-elements').sortable({
    connectWith: '.builder-elements'
});


$('#new').click(function () {
    $('.builder-elements').sortable("destroy")
    $('.clone-section')
        .clone(true) //Clone the hidden section
    .removeClass('clone-section') //Remove the clone class
    .addClass('builder-section') //Add the section class
    .appendTo('#form') //Append cloned section to form
    $('.builder-elements').sortable({
        connectWith: '.builder-elements'
    });
});

/** Last section will be cloned and appended to the form

Items in the cloned section can be sorted to other existing sections, but...

1) When the dynamic section is appended the sorting should work as in  normal section.
2) Drag & drop of items between exiting and cloned sections to be allowed.

*/