JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

HTML

// TODO LIST

    // IMAGENES DENTRO DE LAS PREGUNTAS
    // EL ARRAY DEBE SER UNICO Y QUE CONTENGA PREGUNTA,RESPUESTAS Y FEEDBACK
    // EL DELETE TIENE QUE BORRAR TODOS SUS ELEMENTOS CREADOS EN ARRAYS

JavaScript

// Rellenar XML
var question = [''];
var questionOptions = [];
var questionFeedback = [];
var configGeneral = ['', false, false];
var questionDiv, questionTitle, questionInputDiv, questionInput, questionDivInput, questionDeleteButton, questionAddButton;
var questionOptionsDiv, questionOptionsTitle, questionOptionsInputDiv, questionOptionsInput, questionOptionsDivInput, questionOptionsDeleteButto, questionAddButton;

function getXML()
{
 	document.getElementById("divPrincipal").innerHTML = '';
    document.getElementById("divPrincipalWords").innerHTML = '';
	question = ['Opcion 1','Opcion 2','Opcion 3','Opcion 4'];
    for(var i = 0; i < question.length; i++)
    {
		generateNewElement('myDivQuestions', question, questionDiv, 'Question', i);  
    }   
	questionOptions = ['Palabra 1','Palabra 2','Palabra 3','Palabra 4','Palabra 5'];
    questionFeedback = [0,1,2,3,1];
    for(var i = 0; i < questionOptions.length; i++)
    {
		generateNewElement('myDivWords', questionOptions, questionOptionsDiv, 'Palabra', i);
    } 
    configGeneral = ['Obj', 'Arrastra cada empleo a su categoría', 'Arrastra cada elemento a su columna correspondiente', ''];
    
}
function generate() {
	var myDivGeneric, myDivQuestions, myDivWords;
    myDivGeneric = document.createElement('div');
    myDivGeneric.setAttribute('id', 'myDivGeneric');
    myDivGeneric.style.backgroundColor = "#F0F0F0";
    myDivGeneric.style.border = "2px solid #333";
    myDivGeneric.style.padding = "10px";
    myDivGeneric.style.margin = "10px";
    myDivQuestions = document.createElement('div');
    myDivQuestions.setAttribute('id', 'myDivQuestions');
    myDivQuestions.style.backgroundColor = "#F0F0F0";
    myDivQuestions.style.border = "2px solid #333";
    myDivQuestions.style.padding = "10px";
    myDivQuestions.style.margin = "10px";
    myDivWords = document.createElement('div');
    myDivWords.setAttribute('id', 'myDivWords');
    myDivWords.style.backgroundColor = "#F0F0F0";
    myDivWords.style.border =...