JSFiddle - React, Tailwind, and code Playground

by Alexey Demin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="block-inputs">
  <div class="wrapper">
    <select class="type_design">
      <option value="0">Выбрать</option>
      <option value="1" selected>10 лет</option>
      <option value="15">15 лет</option>
    </select>
    <input type="text" data-qty placeholder="Количество">
    <input type="text" data-price placeholder="Цена">
    <input type="text" data-prepayment placeholder="Предоплата">
    <input type="text" data-surcharge placeholder="Доплата">
    <button class="del">-</button>
  </div>
</div>
<div>
  <button id="add">+</button>
  <p>Стоимость дизайна сайта: <span id="result">0</span> руб.</p>
</div>

JavaScript

// Добавление блока
$('#add').on('click', function(e) {
  // e.preventDefault();
  let $clone = $(".block-inputs .wrapper").first().clone();
  $clone.appendTo(".block-inputs");
  $clone.find('input').first().focus();
});

// Удаление блока
$('.block-inputs').on('click', '.del', function(e) {
  let $parent = $(this).parent('.wrapper');
  // Предотвращение удаления единственного блока
  if ($parent.siblings().length) {
    $parent.remove();
  }
});
//Рассчет стоимости
"use strict";

document.querySelector(".wrapper").addEventListener("change", () => {
  let resCalc = calc();
  document.getElementById("result").textContent = resCalc;
});

function calc() {
  let summ = 0;
  $('.wrapper').each(function(idx, wrapper) {
    console.log(wrapper);
  });
  return summ;
}