JSFiddle - React, Tailwind, and code Playground

by Christoph Voigt

HTML

<script>
var fCounter = 0;

var fInput = new Array();
var fEdit = new Array();
var fDel = new array();
var fArrow = new Array();
var fDetail = new Array();
var fMendatory = new Array();

/**
    Fügt dem untergeordneten Container dynamisch eine weitere
    Frage hinzu
*/
function addQuestion() {
    fCounter++;
    
    var fContainer = document.getElementById("fragen"); // Fragen-Container-Element zwischenspeichern für leichteren Zugriff

    var fLi = document.createElement("li");
    fLi.id = 'bullet'+fCounter;
    fLi.textContent = (fCounter+1)+'. Frage: '; // Note: textContent funktioniert nicht im IE - für IE support sollte innerText genutzt werden. Das wiederum wird nicht vom FF unterstützt...

    fInput[fCounter] = document.createElement("input");
    fInput[fCounter].type = 'text';
    fInput[fCounter].name = 'fragen[]'; //ggf. anpassen
    fInput[fCounter].placeholder = 'Frage #'+(fCounter+1);
    fInput[fCounter].value='';

    fEdit[fCounter] = document.getElementById("edit0").cloneNode(true); // Edit Button
    fEdit[fCounter].id='edit'+fCounter;

    fDel[fCounter] = document.getElementById("del0").cloneNode(true); // Delete Button
    fDel[fCounter].id='del'+fCounter;

    fArrow[fCounter] = document.getElementById("arrow0").cloneNode(true); // Collapse Button
    fArrow[fCounter].id='arrow'+fCounter;

    fDetail[fCounter] = document.createElement("div");
    fDetail[fCounter].id = 'detail'+fCounter;
    fDetail[fCounter].className = 'collapse';
    fDetail[fCounter].textContent = 'Optional ';

    fMendatory[fCounter] = document.createElement("input");
    fMendatory[fCounter].type = 'checkbox';
    fMendatory[fCounter].id = 'mendatory'+fCounter;
    fMendatory[fCounter].name = 'mendatory'+fCounter;
    fMendatory[fCounter].className = 'mendatory';

    alert("You clicked Button " + number);
    
    fDetail.appendChild(fMendatory);
    
    fLi.appendChild(fDetail[fCounter]);
    fLi.appendChild(fArrow[fCounter]);
   ...