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('<div id="add'+telnum+'" class="add"><label> Поле №'+telnum+'</label><input type="text" width="120" name="val[]" id="val" value=""/><div id="ad_f"><div id="dob0" class="dob"></div><div onclick="addD();" class="addbutton">Еще новое</div></div><div class="deletebutton" onclick="deleteField('+telnum+');"></div></div>');
}
function addD () {
var tel = parseInt($('#ad_f').find('div.dob:last').attr('id').slice(3))+1;
$('div#ad_f').append('<div id="dob'+tel+'" class="dob"></div><input type="text"></div><div class="deletebutton" onclick="deleteField('+tel+');">');
}
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="add_field_area">
<div id="add0" class="add">
</div>
</div>
<div onclick="addFiel();" class="addbutton">Добавить новое поле</div>
При нажатии на кнопку ДОБАВИТЬ НОВОЕ ПОЛЕ, добавляем два поля. После этого нажимаем на кнопку ЕЩЕ НОВОЕ для поля №2 и добавление происходит в поле №1 и поле №2. Как сделать чтоб каждому полю соответствовали свои кнопки?