Question

I am trying to clone a table row and generate an array with id since the user could insert n rows. The problem I am facing is that I have 1 select dropdown option in that table row. How to clone a select along with the other input tags which are in 1 single row? (this code generates 2 sets of row at a time, coz of the two appendTo()’s. Thanks for the help!

$("#add").click(function() {
    $("#comTable tr:eq(0)").clone().find("input").each(function() {
        // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
        $(this).val('').attr('id', function(_, id) {
            return id + 'N' + '[' + i + ']'
        });
        $(this).val('').attr('name', function(_, name) {
            return name + 'N' + '[' + i + ']'
        });
    }).end().appendTo("#comTable");

    $("#comTable tr:eq(0)").clone().find("select").each(function() {
        // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
        $(this).val('').attr('id', function(_, id) {
            return id + 'N' + '[' + i + ']'
        });
        $(this).val('').attr('name', function(_, name) {
            return name + 'N' + '[' + i + ']'
        });
    }).end().appendTo("#comTable");
    i++;
});​

Answer 1

You can just select the input and the select element like so:

Old Code:

$("#comTable tr:eq(0)").clone().find("input").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

$("#comTable tr:eq(0)").clone().find("select").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

New Code:

$("#comTable tr:eq(0)").clone().find("input, select").each(function() {
    // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
    $(this).val('').attr('id', function(_, id) {
        return id + 'N' + '[' + i + ']'
    });
    $(this).val('').attr('name', function(_, name) {
        return name + 'N' + '[' + i + ']'
    });
}).end().appendTo("#comTable");

Note the "input, select" selector.

Edit

The other way you could do it, if you wanted to handle the selects differently is chain it differently:

$("#comTable tr:eq(0)")
    .clone()
    .find("input")
    .each(function() {
            // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
            $(this).val('').attr('id', function(_, id) {
                return id + 'N' + '[' + i + ']'
            });
            $(this).val('').attr('name', function(_, name) {
                return name + 'N' + '[' + i + ']'
            });
        })
    .end() //End .find("input")
    .find("select")
    .each(function() {
            // creates array of ids if the user wants to add more than 1 row so it is N[1], etc
            $(this).val('').attr('id', function(_, id) {
                return id + 'N' + '[' + i + ']'
            });
            $(this).val('').attr('name', function(_, name) {
                return name + 'N' + '[' + i + ']'
            });
        })
    .end() //End .find("select")
    .appendTo("#comTable");
i++;

This way removes the extra clone and runs .find again on the newly cloned DOM element.