JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

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">Ответ:</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

let insertButton = document.querySelector(".insert_button");
let form = document.getElementById("form");
let num = 0;

insertButton.addEventListener("click", e => {
	num++;
	form.appendChild(createElem(num));
});

function createElem(num){
	let label = document.createElement("label");
		label.textContent = "Ответ " + num;

	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");

	label.appendChild(input);
	label.appendChild(img);
	img.addEventListener("click", e => del(e));

	return label;
}

function del(e){
	e.target.parentNode.remove();
}