jQuery .clone() DIV test

Experimenting with jQuery clone function to clone a div form and use as parent/child attribute with inheriting event bindings

HTML

<div id="clonedInput1" class="clonedInput">
    <div>
        <td>
            <?php echo $this->Form>input('Qualifications.name',array('label'=>''));?></td>
    </div>
    <div>
        <label for="txtSubCategory" class="">Sub-category <span class="requiredField">*</span>

        </label>
        <select class="" name="txtSubCategory[]" id="subcategory1">
            <option value="">Please select category</option>
        </select>
    </div>
    <div>
        <label for="txtSubSubCategory">Sub-sub-category <span class="requiredField">*</span>

        </label>
        <select name="txtSubSubCategory[]" id="subsubcategory1">
            <option value="">Please select sub-category</option>
        </select>
    </div>
    <div class="actions">
        <button class="clone">Clone</button>
        <button class="remove hide">Remove</button>
    </div>
</div>

CSS

body { padding: 10px;}

.clonedInput { padding: 10px; border-radius: 5px; background-color: #def; margin-bottom: 10px; }

.clonedInput div { margin: 5px; }
.hide, .clone.test{display:none;}
.remove.hide.test{display:block;}

JavaScript

var regex = /^(.*)(\d)+$/i;
var cloneIndex = $(".clonedInput").length;

$("button.clone").live("click", function () {
    $(this).parents(".clonedInput").clone()
        .prependTo("body")
        .attr("id", "clonedInput" + cloneIndex)
        .find("*").each(function () {
        var id = this.id || "";
        var match = id.match(regex) || [];
        if (match.length == 3) {
            this.id = match[1] + (cloneIndex);
        }
    })
    .find('.clone ,.remove').addClass('test');
    cloneIndex++;
});

$("button.remove").live("click", function () {
    $(this).parents(".clonedInput").remove();
});