Цикл, добавление формы?

Question

pro100blich @pro100blich

JavaScript

Цикл, добавление формы?

Всем привет форумчане. Сразу скажу не особо понимаю в JS, больше в серверной части(PHp). Есть некая форма в ней есть, 3 селекта. 2-3 работают без нареканий и вмешательств не требуют. Но вот с первым надо сделать так, чтобы при нажатие Кнопки <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) );