Как реализовать добавление строк input в форму расчета?
Как реализовать добавление/удаление одновременно всех строк input в форму расчета? Т.е. чтобы блок .wapper копировался и все рассчелы работали) Не особо силен в JS, пробовал их схлестнуть между собой - получается что-попало)
// Добавление блока
$('.block-inputs').on('click', '.add_b', function(e) {
e.preventDefault();
let $parent = $(this).parent();
let $clone = $parent.clone();
$parent.after($clone);
$clone.find('input').val('').focus();
});
// Удаление блока
$('.block-inputs').on('click', '.del_b', function(e) {
e.preventDefault();
let $parent = $(this).parent();
// Предотвращение удаления единственного блока
if ($parent.siblings().length) {
$parent.remove();
}
});
//Рассчет стоимости
"use strict";
document.querySelector(".wrapper").addEventListener("change", () => {
let resCalc = calc();
document.getElementById("result").textContent = resCalc ? resCalc : 0;
});
function calc() {
let typeDesign = document.getElementById("type_design");
let count0 = +document.getElementById("count0").value;
let count1 = +document.getElementById("count1").value;
let count3 = +document.getElementById("count3").value;
let count4 = +document.getElementById("count4").value;
let number1 = count0 * count1 - count3 + count4;
let ns = typeDesign.options[typeDesign.selectedIndex].dataset[`ns`];
if (!ns) return false;
if (ns === "/") {
return (number1 / (+typeDesign.value));
} else {
return (number1 * (+typeDesign.value));
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="block-inputs">
<form name="" method="post" action="">
<p>
<div class="wrapper">
<select id="type_design">
<option value="0">Выбрать</option>
<option value="1" data-ns="*" selected>10 лет</option>
<option value="15" data-ns="*">15 лет</option>
</select>
<input type="text" id="count0" value="" placeholder="Количество">
<input type="text" id="count1" value="" placeholder="Цена">
<input type="text" id="count3" value="" placeholder="Предоплата">
<input type="text" id="count4" value="" placeholder="Доплата">
<a class="del_b" href="">-</a>
<a class="add_b" href="">+</a>
</div>
<div>Стоимость дизайна сайта: <span id="result">0</span> руб.</div>
</form>
</div>