Question

I want to clone a form and not have modification of that form effect the original form. How to I give each instance of the form a unique ID so that the elements are not duplicated?

$(document).ready(function() {
    // shows / hides results based on selection
    $(".categories-select").live("change", function() {
        if ($(this).val() == 'dinner') {
            $('.dinner').removeClass('hide');
            // toggles dinner results, sub menus
            $(this).parent('.controls').find('.restaurant-submenu-select').removeClass('hide');
        }
    });    

    // Duplicates category select menu 
    $(".add-activity").click(function() {
        $(".activity-category")
                       .clone()
                       .removeClass('activity-category')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select')
                       .addClass('hide');
    });    

    $(".add-activity-alternate").click(function() {
        $(".activity-category-alternate")
                       .clone()
                       .removeClass('activity-category-alternate')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select, .results-table')
                       .addClass('hide');
    });
});

​

Thank You!

Answer 1

When you clone add also a dynamic id

var id = 0;

(function() {
    yourClone.attr('id', 'something-' + id);
    id++
});

---

In your code something like that:

$(document).ready(function() {

    var id = 0;

    // shows / hides results based on selection
    $(".categories-select").live("change", function() {
        if ($(this).val() == 'dinner') {
            $('.dinner').removeClass('hide');
            // toggles dinner results, sub menus
            $(this).parent('.controls').find('.restaurant-submenu-select').removeClass('hide');
        }
    });    

    // Duplicates category select menu 
    $(".add-activity").click(function() {
        $(".activity-category")
                       .clone()
                       .removeClass('activity-category')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select')
                       .addClass('hide')
                       .attr('id', 'something' + id);
        id++
    });    

    $(".add-activity-alternate").click(function() {
        $(".activity-category-alternate")
                       .clone()
                       .removeClass('activity-category-alternate')
                       .appendTo("#we-want-to")
                       .find('.restaurant-submenu-select, .results-table')
                       .addClass('hide')
                       .attr('id', 'something' + id);
        id++
    });
});