JSFiddle - React, Tailwind, and code Playground
HTML
<form action="/" id="form">
<div class="input-block">
<label class="output-field">Вопрос:</label>
<textarea></textarea>
</div>
<div class="input-block">
<label class="output-field">Ответ 1:</label>
<textarea></textarea>
<img src="https://ru.seaicons.com/wp-content/uploads/2016/09/Actions-dialog-close-icon.png" width="21" height="21" />
</div>
<!-- вставлять сюда -->
</form>
<div class="container">
<button class="insert_button">Добавить ответ</button>
</div>
JavaScript
forms();
function forms(){
let insertButton = document.querySelector(".insert_button");
let form = document.getElementById("form");
let num = 2;
insertButton.addEventListener("click",e => {
num++;
form.appendChild(createElem(num));
});
function createElem(){
let label = document.createElement("label");
let br = document.createElement("br");
let input = document.createElement("textarea");
input.setAttribute("type", "text");
input.classList.add("input");
let img = document.createElement("img");
img.height = 21,img.width = 21,img.src = "https://ru.seaicons.com/wp-content/uploads/2016/09/Actions-dialog-close-icon.png",img.classList.add("delete");
img.addEventListener("click", e => {
e.target.parentNode.remove();
calculate();
});
let span = document.createElement("span");
span.appendChild(document.createTextNode("Ответ " + num));
label.appendChild(span);
label.appendChild(input);
label.appendChild(img);
label.appendChild(br);
return label;
}
function calculate(){
let SPANS = document.getElementsByTagName('form')[0].getElementsByTagName('span');
for(i=0; i<SPANS.length; i++){
SPANS[i].innerText = "Ответ " + +(i + 1);
}
num = SPANS.length;
}
}