JSFiddle - React, Tailwind, and code Playground

by jonyboy

HTML

<div class="container">
<button id="addtit">+ TITULO</button>
<button id="deltit">- TITULO</button>
<button id="add2">+ DESCRIÇÃO</button>
<button id="del2">- DESCRIÇÃO</button>
<div id="saida2"></div>
<div class='botoes'>
<button onclick="resultado()" id='concluir'>CONCLUIR</button>
</div>
<div class="header"><span class="titulo">RESULTADO</span>
</div>
<div class="linha"><textarea id="resultado"></textarea>
</div>
</div>
  

<!-- template 2 -->
<template id="template2">
<div class="linha" id="linha2"><div class="coluna1"><label for="0">DESCRIÇÃO:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
</template>
<!-- template 3 -->
<template id="template3">
<div id="alg">
<div class="linha"><div class="coluna1"><label for="0">TITULO:</label></div><div class="coluna2"><input name="titu" class="0" type="text"/></div>
</div>
<div class="linha" id="linha3"><div class="coluna1"><label for="0">DESCRIÇÃO:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
<div id="saida3"></div>
</div>
</template>

JavaScript

function resultado() {
  var inp2 = document.getElementsByName("inp2");
  var titu = document.getElementsByName("titu");
  var res = document.getElementById("resultado");
  res.value = "";
  
if (titu[0]) {
  for (var k = 0; k < titu.length; k++) {
    if (titu[k].value.trim() != '') {
      res.value += `<div>
<span>${titu[k].value.trim()}</span>
</div>
<ul>\n`;
      for (var j = 0; j < inp2.length; j++) {
        if (inp2[j].value.trim() != '') {
          res.value += `<li>${inp2[j].value.trim()}</li>\n`;
        }
      }
    }
  }
}else {
  console.log("error")
  res.value += `<ul>\n`;
    for (var l = 0; l < inp2.length; l++) {
      if (inp2[l].value.trim() != '') {
        res.value += `<li>${inp2[l].value.trim()}</li>\n`;
      }
    }
 }
};

// -----------------------------------------

let cont2 = 1;
document.getElementById("add2").onclick = function clone2() {
  let container2 = document.getElementById("saida2");  
  let tempLinha2 = document.querySelector('#template2'); 
  let clonar2 = document.importNode(tempLinha2.content, true); 
  
  const label2 = clonar2.querySelector("label");
  label2.htmlFor = cont2;
  clonar2.querySelector("input").className = cont2;
  
  container2.appendChild(clonar2);
  cont2++;
};
document.getElementById("del2").onclick = function del2() {
    document.querySelector('#saida2 #linha2:last-child').remove();
};

// ---------------------------------------

let cont3 = 1;
document.getElementById("addtit").onclick = function clone3() {
  let container3 = document.getElementById("saida2");  
  let tempLinha3 = document.querySelector('#template3');
  let clonar3 = document.importNode(tempLinha3.content, true); 
  
  const label3 = clonar3.querySelector("label");
  label3.htmlFor = cont3;
  clonar3.querySelector("input").className = cont3;
  
  container3.appendChild(clonar3);
  cont3++;
  document.getElementById('add2').id = 'add3';
  document.getElementById('del2').id = 'del3';
};
document.getElementById("deltit").onclick =...