Доброго времени суток, господа. Помогите реализовать задуманное.
Есть Код JS
$(function() {
$("#form_status_added").click(function () {
var elemCount = document.getElementsByClassName('param').length + 1;
$("<div class='param mt-3'><div class='row'><div class='col-12'><div class='alert alert-primary text-center' id='totals'><strong>"+elemCount+"</strong></div></div><div class='col-12'><textarea rows='5' class='form-control mb-3' type='text' name='rabota"+elemCount+"[]' placeholder='Наименование видов работ'></textarea></div></div></div><div class='row'><div class='col-12 mb-2 text-center'><strong>Материал</strong></div></div><div class='row' id='mater"+elemCount+"'><div class='col-8'><input class='form-control mb-3' type='text' name='mater_name"+elemCount+"[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_units"+elemCount+"[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_price"+elemCount+"[]' placeholder='Цена за ед.'></div></div><div class='row' id='nextmater"+elemCount+"'><div class='col-12'><input class='btn btn-primary btn-lg btn-block' type='button' value='Добавить Материал' id='form_"+elemCount+"'></div></div><div class='row'><div class='col-12'><hr></div></div>" ).insertBefore("#next");
document.getElementById('total').value = elemCount;
});
});
$(function() {
$("form_1").click(function () {
$("<div class='row' id='mater1'><div class='col-8'><input class='form-control mb-3' type='text' name='mater_name1[]' placeholder='Название'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_units1[]' placeholder='Количество'></div><div class='col-2'><input class='form-control mb-3' type='text' name='mater_price1[]' placeholder='Цена за ед.'></div></div>" ).insertBefore("#nextmater1");
});
});
$(document).ready(function () {
var elemtotal = document.getElementsByClassName('param').length;
document.getElementById('total').value = elemtotal;
});
Код HTML
<div class="param mt-3">
<div class="row">
<div class="col-12"><div class="alert alert-primary text-center" id="totals"><strong>1</strong></div></div>
<div class="col-12"><textarea rows="5" class="form-control mb-3" type="text" name="rabota1[]" placeholder="Наименование видов работ"></textarea></div>
</div>
<div class="row">
<div class="col-12 mb-2 text-center"><strong>Материал</strong></div>
</div>
<div class="row" id="smeta_mater1">
<div class="col-8"><input class="form-control mb-3" type="text" name="smeta_mater_name1[]" placeholder="Название"></div>
<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_units1[]" placeholder="Количество"></div>
<div class="col-2"><input class="form-control mb-3" type="text" name="smeta_mater_price1[]" placeholder="Цена за ед."></div>
</div>
<div class="row" id="nextmater1">
<div class="col-12">
<input id="form_1" class="btn btn-primary btn-lg btn-block" type="button" value="Добавить Материал">
</div>
</div>
<div class="row"><div class="col-12"><hr></div></div>
</div>
<div class="row" id="next">
<div class="col-6">
<input class="btn btn-primary btn-lg btn-block" type="button" value="Добавить поле" id="form_status_added">
</div>
<div class="col-6">
<input type="hidden" name="total" id="total" value="">
<button name="updates" class="btn btn-primary btn-lg btn-block">Обновить</button>
</div>
</div>
Так вот. Это добавление внутри добавления.
Примерно визуализированное
https://jsfiddle.net/069fojyx/
Не работает #form_1
И как написать скрипт для всего добавленного по полю #form_status_added