JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

JavaScript

// Rellenar XML
var options = [''];
var words = [];
var wordsSolutions = [];
var configGeneral = [];
var optionsDiv, optionsTitle, optionsInputDiv, optionsInput, divInput, optionsDeleteButton, optionsAddButton;
var optionsDivWords, optionsTitleWords, optionsInputDivWords, optionsInputWords, divInputWords, optionsDeleteButtonWords, optionsAddButtonWords;
function getXML()
{
 	document.getElementById("divPrincipal").innerHTML = '';
    document.getElementById("divPrincipalWords").innerHTML = '';
	options = ['Opcion 1','Opcion 2','Opcion 3','Opcion 4'];
    for(var i = 0; i < options.length; i++)
    {
		generateNewElement('myDivBlocks', options, optionsDiv, 'Opcion', i);  
    }   
	words = ['Palabra 1','Palabra 2','Palabra 3','Palabra 4','Palabra 5'];
    wordsSolutions = [0,1,2,3,1];
    for(var i = 0; i < words.length; i++)
    {
		generateNewElement('myDivWords', words, optionsDivWords, 'Palabra', i);
    } 
    configGeneral = ['Obj', 'Arrastra cada empleo a su categoría', 'Arrastra cada elemento a su columna correspondiente', ''];
    
}
function generate() {
	var myDivGeneric, myDivBlocks, 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";
    myDivBlocks = document.createElement('div');
    myDivBlocks.setAttribute('id', 'myDivBlocks');
    myDivBlocks.style.backgroundColor = "#F0F0F0";
    myDivBlocks.style.border = "2px solid #333";
    myDivBlocks.style.padding = "10px";
    myDivBlocks.style.margin = "10px";
    myDivWords = document.createElement('div');
    myDivWords.setAttribute('id', 'myDivWords');
    myDivWords.style.backgroundColor = "#F0F0F0";
    myDivWords.style.border = "2px solid #333";
    myDivWords.style.padding = "10px";
    myDivWords.style.margin = "10px";
   ...