Поскольку при использовании метода clone в классе css каждый контейнер div с классом css .form-block клонируется.Когда вы добавляете еще один блок с классом css .form-block, у вас есть два блока с одинаковым именем класса.При следующем нажатии вы клонируете два элемента и так далее.
Почему бы не использовать тег шаблона HTML5.Используя этот собственный тип шаблонов, вы можете заархивировать несколько преимуществ.Ваша форма будет быстрее, потому что вам не нужно загружать библиотеку jQuery.С помощью нескольких строк нативного JavaScript вы можете архивировать, что хотите.Посмотрите на следующий пример.
<form id="my-form" action="" method="post">
</form>
<button id="add-button">Add</button>
<template id="my-template">
<div>
<label>
<span>Name</span>
<input type="text" name="name[]" placeholder="your name">
</label>
</div>
</template>
Пока это HTML-пример.Вы можете добавить свои собственные элементы ввода и стили здесь.Этот фрагмент кода предназначен только для примера.
Теперь пришло время для некоторого собственного JavaScript.
<script>
document.getElementById('add-button').addEventListener('click', function(event) {
var form = document.getElementById('my-form'),
template = document.getElementById('my-template'),
clone = document.importNode(template.content, true);
form.appendChild(clone);
}, false);
// to add the first input element automatically
var event = new Event('click');
document.getElementById('add-button').dispatchEvent(event);
</script>
Это работает в любом современном браузере.Дополнительные сведения о теге шаблона html5 и его функциях см. В MDN Web Docs .Также посмотрите на caniuse.com , чтобы увидеть поддержку браузера.Как видите, Microsoft Internet Explorer 11 не поддерживает тег шаблона и его функциональность.Для этого есть несколько поразительных полизаполнений, таких как небольшой шаблонный полифилл *1018*, который можно использовать, когда требуется поддержка IE11.