JSFiddle - React, Tailwind, and code Playground

by lmcdevloper

HTML

TODO:

CSS

input{width:40%;}
div{clear:both;width:90%;border:2px dotted #333;margin: 10px;padding:10px;}
textarea{width:100%;}
button{margin:10px 0px;padding:10px;width:100%;}
.contenedor{background-color:white;border: 2px solid red;margin:10px;padding:10px;}

JavaScript

for(q=0; q < 2;q++)
{
var divGeneral = document.createElement('div');
divGeneral.innerHTML = '<p>Contenido Pregunta ' + q + '</p>';
divGeneral.setAttribute('class','contenedor');
var divQuestion = document.createElement('div');
var inputDivQuestionText = document.createElement('textarea');
inputDivQuestionText.setAttribute('placeholder','Texto de la pregunta ' + q)
divQuestion.append(inputDivQuestionText);
var inputDivQuesitonFeedback = document.createElement('textarea');
inputDivQuesitonFeedback.setAttribute('placeholder','Texto del feedback la pregunta ' + q);
divQuestion.append(inputDivQuesitonFeedback);
var divQuestionOptions = document.createElement('div');
divQuestionOptions.innerHTML = '<p>Respuestas de la pregunta<p>';
divQuestionOptions.setAttribute('id','question-div-' + q);
for(var i = 0; i< 3; i++)
{
	addDivQuestionOptionsElement(divQuestionOptions);    
}

divQuestion.append(divQuestionOptions);

var divQuestionOptionsAddButton = document.createElement('button');
divQuestionOptionsAddButton.innerHTML = 'Insertar Opción';
divQuestionOptionsAddButton.setAttribute('id', 'id-' + q)
divQuestionOptionsAddButton.addEventListener('click', function(event) {
	var parent = document.getElementById('question-div-' + this.getAttribute('id').split('-')[1]);
   	// Insertar elemento
    addDivQuestionOptionsElement(parent);
});

divQuestion.append(divQuestionOptionsAddButton);
divGeneral.append(divQuestion);
document.body.appendChild(divGeneral);
}


function rewriteId(_parent, prefixElem) {
	//	id-0-preg-0
	var indexQuestion = _parent.getAttribute('id').split('-div-')[1];
    var item = _parent.getElementsByTagName("div");
    
    for (var i = 0; i < item.length; i++) {
		item[i].setAttribute('id', 'container-' + indexQuestion + '-id-' + i);
        // label
        var itemLabel = item[i].getElementsByTagName("label");
        itemLabel[0].setAttribute('for',  indexQuestion +'-id-' + i);
        itemLabel[0].innerHTML = '[' + String.fromCharCode(65 + i) + ']';
  ...