Auto incrementing ID's of cloned sections not incrementing

Question

Hi guys, ok so I have these 3 fields that I am cloning, using jQuery, but for some reason the ID's are not incrementing as they should, they all end up with the same ID's, here is the jQuery code:

$(document).ready(function() {
    $('#btnAdd').click(function() {
        var num     = $('.clonedSection').length;
        var newNum  = new Number(num + 1);

        var newSection = $('#clonedSection' + num).clone().attr('id', 'clonedSection' + newNum);

        //reset the value of the text fields
        newSection.find(':text, textarea').val('');

        newSection.children(':first').children(':first').attr('id', 'gender' + newNum).attr('name', 'gender' + newNum);
        newSection.children(':nth-child(2)').children(':first').attr('id', 'age' + newNum).attr('name', 'age' + newNum);
        newSection.children(':nth-child(3)').children(':first').attr('id', 'school' + newNum).attr('name', 'school' + newNum);

        $('.clonedSection').last().append(newSection);

        $('#btnDel').attr('disabled','');

        if (newNum == 4)
            $('#btnAdd').attr('disabled','disabled');
    });

    $('#btnDel').click(function() {
        var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
        $('#clonedSection' + num).remove();     // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled','');

        // if only one element remains, disable the "remove" button
        if (num-1 == 1)
            $('#btnDel').attr('disabled','disabled');
    });

    $('#btnDel').attr('disabled','disabled');
});

HTML:

  <div id='skewl'>
    <div id='clonedSection1' class='clonedSection'>
        <div class='clonedInput' style='width: 600px; height: 7px;'>
            <label for='gender1'>Gender: </label>
            <span class='positionMe'><select type='text' name='gender1' id='gender1' >
            <option>Select one</option>
            <option>Male</option>
            <option>Female</option>
            </select>
            </span>
        </div>
        <br />
        <div class='clonedInputTwo' style='width: 600px; height: 7px;'>
            <label for='age1'>Age: </label>
            <span class='positionMe'><input type='text' name='age1' id='age1'  /></span>
        </div>
        <br />
        <div class='clonedInputThree' style='width: 600px; height: 7px;'>
            <label for='school1'>School: </label>
            <span class='positionMe'><input type='text' name='school1' id='school1'  /></span>
        </div>
        <br />
    </div>

Any ideas?

Thanx in advance!

Answer 1

At least part of the problem is with your use of nth-child. You have some <br> elements in there, and they are counted when you use nth-child. You'll have to adjust for those.

I do see the IDs incrementing, but they get messed up after that first <br>, so for example the "age" elements are getting the IDs for "school".

Also be aware that you're nesting the sections after it is cloned, so the second group is inside the first, the third is inside the second, and so on.

Try using .find() tag and attribute selectors to find the nested elements that you want to modify, instead of a bunch of :first and nth-child. This makes your code a little more descriptive.

For example:

 // Update gender section
newSection.find('.clonedInput > label').attr({'for':'gender' + newNum})
newSection.find('.clonedInput > span > select').attr({'id':'gender' + newNum, 'name':'gender' + newNum});

 // Update age section
newSection.find('.clonedInputTwo > label').attr({'for':'age' + newNum})
newSection.find('.clonedInputTwo > span > input').attr({'id':'age' + newNum, 'name':'age' + newNum});

 // Update school section
newSection.find('.clonedInputThree > label').attr({'for':'school' + newNum})
newSection.find('.clonedInputThree > span > input').attr({'id':'school' + newNum, 'name':'school' + newNum});

$('.clonedSection').last().after(newSection);

EDIT: Updated code to most recent version from comments below.