<button>Добавить еще</button>Происходило добавление еще одной формы такой же, только к select name,input name прибавлялось значения $i(число от 1 до 20), то бишь select name="test_select_$i",input name="start_date_$i".
И при каждом нажатие на кнопку Добавить еще происходило $i++.
Конечный результат.
Так как классы убраны то сумма считаться не будет. Могли бы вы добавить к итоговой сумме новые селекты.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap DaeteTimePicker</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<style type="text/css">
.close{
cursor: pointer;
}
</style>
<div class="contener">
<div class="col">
<form class="form-horizontal" enctype='multipart/form-data' action='' method='POST'>
<fieldset>
<legend>Программа1</legend>
<div class="form-group row">
<div class="col">
<div class="">
<select class="form-control" name="test_select">
<option data-price="100" value="1">1</option>
<option data-price="200" value="2">2</option>
<option data-price="300" value="3">3</option>
<option data-price="300" value="4">4</option>
<option data-price="300" value="5">5</option>
<option data-price="300" value="20">20</option>
</select>
<div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
<div class="bg-warning">Было выбрано:</div>
<div class="list bg-warning"></div>
</div>
</div>
<div class="col">
Начало <input type="date" name="start_date" class="form-control">
</div>
<div class="col">
Конец <input type="date" name="end_date" class="form-control">
</div>
<div class="col">Номер <input type="text" name="num" class="form-control">
</div>
</div>
<button>Добавить еще</button>
</fieldset>
<fieldset>
<legend>Программы2</legend>
<div class="form-group row">
<div class="col">
<div class="box-select">
<select class="select form-control" >
<option data-price="100" value="1">1</option>
<option data-price="200" value="2">2</option>
<option data-price="300" value="3">3</option>
<option data-price="300" value="4">4</option>
<option data-price="300" value="5">5</option>
</select>
<div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div >
<div class="bg-warning">Было выбрано:</div>
<div class="list bg-warning"></div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Программы3</legend>
<div class="form-group row">
<div class="col">
<div class="box-select">
<select class="select form-control" >
<option data-price="100" value="1">1</option>
<option data-price="200" value="2">2</option>
<option data-price="300" value="3">3</option>
<option data-price="300" value="4">4</option>
<option data-price="300" value="5">5</option>
</select>
<div class="bg-danger">Сумма: <span class="summ">0</span> руб.</div>
<div class="bg-warning">Было выбрано:</div>
<div class="list bg-warning"></div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<div class="input-group">
<div class="input-group-text">ИТОГ</div>
<span class="total_span form-control" id="exampleInputAmount">0</span>
<div class="input-group-text">.00</div>
</div>
</div>
<button type="submit" name="button" class="btn btn-primary col-md-2">Оплатиь</button>
</div>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
(function() {
document.querySelectorAll('.box-select').forEach(e => {
e.querySelector('.select').insertAdjacentHTML('afterBegin', `<option disabled selected></option>`);
[...e.querySelector('.select').children].forEach((e,i) => e.dataset.id = i + 1 );
});
})();
function calc(e) {
let target = e.target.selectedOptions[0];
if (target.parentElement.classList.contains('select')) {
let summ = this.parentElement.querySelector('.summ');
let new_div = `<div class="position">${target.outerHTML.replace(/option/g,'span')}<span class="close">X</span></div>`;
target.disabled = true;
this.children[0].selected = true;
this.parentElement.querySelector('.list').insertAdjacentHTML('beforeEnd', new_div);
summ.textContent = +summ.textContent + +target.dataset.price;
}
total();
}
function del(e) {
if (e.target.classList.contains('close')) {
let data_id = +e.target.previousElementSibling.dataset.id;
let parent = e.currentTarget.parentElement;
parent.querySelector(`.select [data-id="${data_id}"]`).disabled = false;
parent.querySelector(`.select`).children[0].selected = true;
parent.querySelector('.summ').textContent = +parent.querySelector('.summ').textContent - +e.target.previousElementSibling.dataset.price;
e.target.closest('.position').remove();
}
total();
}
function total() {
document.querySelector('.total_span').textContent = [...document.querySelectorAll('.summ')].map(e => +e.textContent).reduce((a,b) => a + b);
}
document.querySelectorAll('.box-select .select').forEach(e => e.addEventListener('change', calc) );
document.querySelectorAll('.box-select .list').forEach(e => e.addEventListener('click', del) );