Добавление элемента к клонированному элементу

Question

У меня есть форма с таблицей HTML, которая имеет кнопку (#addRows), которая при нажатии будет клонировать первую строку таблицы и приложить ее к нижней части таблицы.

Эта таблица находится в разделе HTML с некоторыми другими полями ввода, которые также могут быть клонированы и добавлены в нижней части моей формы. Когда я клонирую секцию, я меняю все идентификаторы дочерних элементов, чтобы включить число, которое может быть итерировано, зависит от того, сколько раз пользователь клонирует этот раздел.

Пример

<div id="someID"> ... </div> 
<div id="someID2"> ... </div> 
<div id="someID3"> ... </div> 

Я делаю это с JQuery, как этот

$(function() {  
    var $section = $("#facility_section_info").clone(); 
    var $cloneID = 1; 
    $(".addSection").click(function() { 
     var $sectionClone = $section.clone(true).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + $cloneID); }); 
     $('#facility_section_info').append($sectionClone); 
     $cloneID++; 
    }); 
}); 

Когда я клонировать раздел, который содержит таблицу Я также клонирования кнопку #addRows, которая при нажатии на следует добавить таблицу строка к таблице, на которую она нажата. Однако, если я клонирую свой раздел, и я нажимаю на свою вторую кнопку #addRows, она клонирует мою таблицу, но она добавляется к моей первой таблице, а не к второй.

Вот мой addRows кнопку и обработчик события

<input type="button" value="+" id="addRows" class="addRows"/> 

$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $("#row0").clone(); 
     $idVal = 1; 
     $(document).on('click', '.addRows', function(){ 
      var copy = $firstTRCopy.clone(true); 
      var newId = 'row' +$idVal; 
      copy.attr('id', newId); 
      $idVal += 1; 
      copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>"); 
      $componentTB.append(copy); 
     }); 
}); 

Мой вопрос, когда я клонировать мой раздел HTML, который держит мой стол и #addButton как я могу гарантировать, что, когда пользователь нажимает на оригинальной кнопку приводит будет клонировать и добавлять к этой таблице или, если я нажимаю кнопку клонирования, она будет клонировать и добавлять только к клонированной таблице?

Если что-то неясно, сообщите мне, чтобы я мог лучше объяснить, что я пытаюсь сделать, спасибо.

Вот JSFiddle, демонстрирующий проблему, которую я испытываю.

Answer 1

Потому что я действительно люблю вас BigRabbit, вот где я. Вы увидите, по крайней мере, одно полезное исправление здесь:

var $sectionClone = $section.clone(true); 
    $sectionClone.find("*[id]").andSelf().each(function() { 
     $(this).attr("id", $(this).attr("id") + $cloneID); 
    }); 

и исправление вопроса вы не сообщали еще

$copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>'); 

использованием

$("#facility_section_info").on('click', '.remove', function (e) { 
    e.preventDefault(); 
    $("#"+$(this).data("removeid")).remove(); 
}); 

FIDDLE

$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $("#row0").clone(), 
     $section = $("#facility_section_info>fieldset").clone(), 
     $cloneID = 0, 
     $idVal = 0; 

    $("#facility_section_info").on('click', '.remove', function (e) { 
     e.preventDefault(); 
     $("#"+$(this).data("removeid")).remove(); 
    }); 

    $("#facility_section_info").on('click', '.addRows', function() { 
     $idVal++; 
     var $copy = $firstTRCopy.clone(true); 
     var newId = 'row' + $idVal; 
     $copy.attr('id', newId); 
     $copy.children('td').last().append(' <a href="#" class="remove" data-removeid="'+newId + '">Remove</a>'); 
     $(this).closest("fieldset").find("tbody").append($copy); 
    }); 

    $("#facility_section_info").on("click", ".addSection", function() { 
     $cloneID++; 
     var $sectionClone = $section.clone(true); 
     $sectionClone.find("*[id]").andSelf().each(function() { 
      $(this).attr("id", $(this).attr("id") + $cloneID); 
     }); 
     $('#facility_section_info').append($sectionClone); 

    }); 
});