Auto incrementing ID из клонированных разделов не увеличивается

Question

ОК, поэтому у меня есть эти 3 поля, которые я клонирую, используя jQuery, но по какой-то причине идентификаторы не увеличиваются, как должны, все они имеют одинаковые идентификаторы, здесь код JQuery:

$(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> 

Любые идеи?

Thanx заранее!

Answer 1

По крайней мере, часть проблемы связана с использованием nth-child. У вас есть некоторые <br> элементов, и они учитываются при использовании nth-child. Вам придется приспособиться к этим.

Я вижу идентификаторы, увеличивающиеся, но после первого <br> меняются, так что, например, элементы «возраста» получают идентификаторы для «школы».

Также имейте в виду, что вы вставляете разделы после клонирования, поэтому вторая группа находится внутри первой, третья - внутри второй и т. Д.

Попробуйте использовать теги и атрибуты .find(), чтобы найти вложенные элементы, которые вы хотите изменить, вместо связки :first и nth-child. Это делает ваш код немного более наглядным.

Например:

// 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: Обновлен код самой последней версии из комментариев ниже.