Clone form and increment

Question

I have a form below that I want to clone, increment the id(att1) and it\'s inputs, textareas etc and append to the attendees div. Any help much appreciated. Been wrecking my

Answer 1

This example might help you. example

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents p').size() + 1;

    $(document).on('click','#addScnt', function() {
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
    });

    $(document).on('click','#remScnt', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

});

Answer 2

i know it's old thread.. i just wanna share simply way to increment id. i'm using same class in all cloned element

UPDATE :

this more elegance way :

var clone_counter = 1; // global variable
$('.clone').click(function(){
   $('.clonethis').clone();
   console.log(clone_counter);
   clone_counter++;
});

Answer 3

See the fiddle.

Add a class attendee to the div id="att1"

 <div id="att1" class="attendee">

And the JS:

$(function(){
    var template = $('#attendees .attendee:first').clone(),
        attendeesCount = 1;

    var addAttendee = function(){
        attendeesCount++;
        var attendee = template.clone().find(':input').each(function(){
            var newId = this.id.substring(0, this.id.length-1) + attendeesCount;
            $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
            this.name = this.id = newId; // update id and name (assume the same)
        }).end() // back to .attendee
        .attr('id', 'att' + attendeesCount) // update attendee id
        .prependTo('#attendees'); // add to container
    };

    $('.add').click(addAttendee); // attach event
});

Answer 4

Try this

    empty_html = $('#att1').html();

    $('.add').click(function() {

        last_id = $('#attendees div:last').attr('id').replace('attr','');

        next_id = last_id++;

        new_div = $('<div id="' + next_id + '">' + empty_html +'<div>');

        $('#attendees').append(new_div);

    });

Requires a few tweaks to your HTML, I would move the add link out of the attendees div.

Answer 5

I posted this same answer elsewhere, but here I think it applies to this question too.

I created an 'original' element and hid it on the page. I appended "---" to the value of any attribute that needed to be incremented within any child elements of the original.

Whenever the user clicked a button to create a clone of the original, I created a clone, then globally replaced "---" with the current index within that clone's HTML. Something like this:

var $clone = $original.clone();
var cloneHTML = $clone.html().replace(/---/g, incrementedFieldNum);
$clone.html(cloneHTML);

// Insert and show the clone after the original
$original.after($clone);

I used a data attribute to store updated values of incrementedFieldNum (not shown in the code above).

Hopefully that helps. It's a lot less code and it's a more general solution I think. I had a lot of nested elements that needed to have incremented IDs and names, so a solution like the one from @Fierceblood was impractical.