Динамическое добавление полей форм jQuery

var count_input = 0; function addFiel () { var telnum = parseInt($('#add_field_area').find('div.add:last').attr('id').slice(3))+1; $('div#add_field_area').append('

Поле №'+telnum+'

Еще новое

'); } function addD () { var tel = parseInt($('#ad_f').find('div.dob:last').attr('id').slice(3))+1; $('div#ad_f').append('

'); } function deleteField (id) { $('div#add'+id).remove(); } input { height: 20px; margin: 5px; width:400px; } .addbutton { text-align: center; vertical-align:middle; font-size: 13px; width: 283px; border: 1px solid #70A9FD; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; cursor: pointer; margin: 2px 0 0 110px; color: #326DC5; padding: 4px; background-color:#BED6FF; } .deletebutton { width: 20px; height: 22px; cursor: pointer; margin: 5px; display:inline-block; background: url(delete.png) repeat; background-position: center center; background-repeat: no-repeat; position:absolute; top: 1px; left: 480px; } .add { position:relative; }

Добавить новое поле

При нажатии на кнопку ДОБАВИТЬ НОВОЕ ПОЛЕ, добавляем два поля. После этого нажимаем на кнопку ЕЩЕ НОВОЕ для поля №2 и добавление происходит в поле №1 и поле №2. Как сделать чтоб каждому полю соответствовали свои кнопки?

Ответ

Использовать всплытие событий и подниматься до нужного контейнера:
$(document).on('click', ".container .add-group", function() { var container = $(this).closest(".container"); container.append( $("#group-template").html() .replace(/\{\{g\}\}/g, container.children(".group").last().data("i") + 1 || 1) ); }).on('click', ".group .add-field", function() { var group = $(this).closest(".group"); group.append( $("#field-template").html() .replace(/\{\{g\}\}/g, group.data("i")) .replace(/\{\{f\}\}/g, group.children(".field").last().data("i") + 1 || 1) ); }).on('click', ".group .field .remove-field", function() { $(this).closest(".field").remove(); }); section { border: 1px solid; margin: 1em 0; }

PS: Лучше воспользоваться нормальным шаблонизатором.