JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<div>
<h2><span>Arbeitsplatz </span><button type="button" name="remove">Entfernen</button></h2>
<label for="uberschrift"><span>Ăśberschrift:</span><input type="text" name="uberschrift" size="80"></label>
<label for="inhalt"><span>Text:</span><input type="text" name="inhalt" size="80"></label>
<label for="bild"><span>Bild:</span><input name="bild" type="file"></label>
<label for="video"><span>Video:</span><input name="video" type="file"></label>
<label for="schluss"><span>Schlusstext:</span><input name="schluss" type="text" size="80"></label>
</div>
</form>
<button id="newPlace" type="button">Neuer Arbeitsplatz</button>
CSS
form { counter-reset: plaetze 0; }
h2 span:after { content: counter(plaetze); counter-increment: plaetze 1; display:inline; }
label { display: block; margin-bottom: 1em; }
label span { display: inline-block; width: 6em; }
label input[type=text] { display: inline-block; }
button[name=remove] { margin-left: 2em; vertical-align: top; line-height: 1.5em; display:none; }
form div:not(:only-of-type) button[name=remove] { display:inline; }
JavaScript
document.addEventListener("DOMContentLoaded", function() {
var form = document.querySelector("form");
document.getElementById("newPlace").addEventListener("click", cloneSection);
form.addEventListener("click", removeSection);
function cloneSection(evt)
{
var target = form.querySelector("div:first-child").cloneNode(true);
form.appendChild(target);
var textFields = target.querySelectorAll("input[type=text]");
for(j=0; j < textFields.length; ++j)
textFields[j].value = '';
}
function removeSection(evt) {
if (evt.target.name == "remove") {
form.removeChild(evt.target.parentNode.parentNode);
}
}
});