JSFiddle - React, Tailwind, and code Playground

by Jochbart

HTML

<form>
        <section>
            <h2>Arbeitsplatz <span></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>
            <br />
            <label>
                Anzahl der hochzuladenen Bilder:
                <select name="anzBilder">
                    <option value="">Bitte wählen</option>
                    <option value="1"> 1 Bild</option>
                    <option value="2"> 2 Bilder</option>
                    <option value="3"> 3 Bilder</option>
                    <option value="4"> 4 Bilder</option>
                    <option value="5"> 5 Bilder</option>
                    <option value="6"> 6 Bilder</option>
                    <option value="7"> 7 Bilder</option>
                    <option value="8"> 8 Bilder</option>
                    <option value="9"> 9 Bilder</option>
                    <option value="10">10 Bilder</option>
                </select>
            </label>

            <ul class="bilder"></ul>


          <!--  <label for="bild"><span>Bild:</span><input name="bild" type="file"></label>-->
            <br />
            <br />
            <label>
                Anzahl der hochzuladenen Videos:
                <select name="anzVideos">
                    <option value="">Bitte wählen</option>
                    <option value="1">1 Video</option>
                    <option value="2">2 Videos</option>
                    <option value="3">3 Videos</option>
                    <option value="4">4 Videos</option>
                    <option value="5">5 Videos</option>
                    <option value="6">6 Videos</option>
                    <option value="7">7 Videos</option>
                    <option value="8">8 Videos</option>
                    <option value="9">9...

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; }



#newPlace{
  border-radius: 0.5em;
  background-color: greenyellow;
font-weight: bold;
}
#enter{
  margin-left: 347px;
  border-radius: 0.5em;
  background-color: dodgerblue;
  font-weight: bold;
}

#container{
  display: inline-block; margin-bottom: 1em;
}


    ul.bilder{
    list-style:none;
    margin:0em;
    padding:0em;
}
ul.videos {
    list-style: none;
    margin: 0em;
    padding: 0em;
}

option {
    text-align:center;


}
select {
    text-align:center;

}

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

            //Dropdown Bilder
            form.addEventListener("change", function (evt) {
                if (evt.target.name == "anzBilder")
                    updateBilderUpload(sectionFor(evt.target), evt.target.value);
            });

            //Dropdown Videos
            form.addEventListener("change", function (evt) {
                if (evt.target.name == "anzVideos")
                    updateVideoUpload(sectionFor(evt.target), evt.target.value);
            });

            function cloneSection(evt) {
                var target = form.querySelector("section:first-child").cloneNode(true);
                form.appendChild(target);
                updateHeader(target, null);
                updateBilderUpload(target, null);
                updateVideoUpload(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 = "Arbeitsplatz - " + hdrValue || "Arbeitsplatz ";

                if (hdrValue != null)
                    header.innerText = " - " + hdrValue;

                else
                    header.innerText...