Проблема 1
Логично, что при нажатии на кнопку у Вас копируется каждый раз блок #otdel
, именно в таком виде, в котором он на данный момент находится. Если в нем три #number_block
, то он и скопирует три. Поэтому этот вопрос надо решать на уровне логики приложения. Нужен исходный вариант, тогда и храните исходный вариант.
var otdel = $("#otdel" ).clone();
$('button.b2').click(function(){
otdel.clone().appendTo( ".goodbye2" );
return false;
});
Проблема 2
Вы берете #number_block
и копируете его во все блоки, которые содержат класс .goodbye3
кодом appendTo( ".goodbye3" )
. Логично, что это поведение добавит код во все отделы. Если нужно добавить в один отдел, то и добавляйте в текущий.
$('button.b1').click(function(event){
$("#number_block" ).clone().insertBefore( this );
return false;
});
Проблема 3
Не забывайте, что вы копируете объекты без событий, поэтому надо еще к ним привязать события или воспользоваться функцией JQuery, которая копирует объекты вместе с событиями (к сожалению, я уже забыл, как это делать правильно).
Проблема 4
Вы должны учесть, что у Вас там начинают повторяться атрибуты id
, что по правилам HTML не допустимо, и атрибуты name
, и когда все это дело будет отправлено из формы на сервер, может получится не очень весело.
P.S. Решение первых двух: jsfiddle