JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<section>
<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>
</section>
</form>
<button id="newPlace" type="button">Neuer Arbeitsplatz</button>
CSS
form { counter-reset: plaetze 0; }
h2 span:before { 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 section: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", function(evt) {
if (evt.target.name == "remove") form.removeChild(sectionFor(evt.target));
});
form.addEventListener("input", function(evt) {
if (evt.target.name == "uberschrift") updateHeader(sectionFor(evt.target), evt.target.value);
});
function cloneSection(evt) {
var target = form.querySelector("section:first-child").cloneNode(true);
form.appendChild(target);
updateHeader(target, null);
var textFields = target.querySelectorAll("input[type=text]");
for(j=0; j < textFields.length; ++j)
textFields[j].value = '';
}
function updateHeader(section, hdrValue) {
var header = section && section.querySelector("h2 span");
if (header) {
header.innerText = hdrValue || "Arbeitsplatz";
}
}
function sectionFor(control) {
while (control && control.tagName.toLowerCase() != "section")
control = control.parentNode;
return control;
}
});