The code below creates new input and sends the values to textarea , since the number of input is undefined it was necessary to loop to get the values through name , it works normally if it is only <li>${inp1[i].value.trim()}</li> , however I realized that I would need to add some other elements like <div> , <span> and ul that were static and out of the loop, and I also needed to add a second list with different values, as I know very little of javascript caught a lot and I did not get anything.
The result in textarea would look something like this:
<div>
<ol>
<!-- Os valores do primeiro input aqui -->
</ol>
</div>
<div>
<ul>
<!-- Os valores do segundo input aqui -->
</ul>
</div>
let cont = 1;
document.getElementById("add1").onclick = function clone() {
let container = document.getElementById("saida1");
let tempLinha = document.querySelector('#template1');
let clonar = document.importNode(tempLinha.content, true);
const label = clonar.querySelector("label");
label.htmlFor = cont;
// label.textContent = "Primeiro " + (cont) + ":"; caso eu precise
clonar.querySelector("input").className = cont;
container.appendChild(clonar);
cont++;
}
document.getElementById("del1").onclick = function del() {
document.querySelector('#saida1 #linha1:last-child').remove();
};
// -----------------------------------------
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;
// label2.textContent = "Segundo " + (cont2) + ":"; caso eu precise
clonar2.querySelector("input").className = cont2;
container2.appendChild(clonar2);
cont2++;
}
document.getElementById("del2").onclick = function del() {
document.querySelector('#saida2 #linha2:last-child').remove();
};
// ---------------------------------------
document.getElementById("concluir").onclick = function resultado() {
var inp1 = document.getElementsByName("inp1");
var res = document.getElementById("resultado");
res.value = "";
for (var i = 0; i < inp1.length; i++) {
if (inp1[i].value.trim() != '') {
res.value += "<div><p><span>Alguma coisa</span></p></div>\n<ul>\n" + '<li>${inp1[i].value.trim()}</li>' + "</ul>" + "<div><p><span>Alguma coisa</span></p>"
// adicionei aqui só como exemplo mesmo
}
}
};<div class="container">
<div class="linha" id="linha1"><div class="coluna1"><label for="01">Primeiro:</label></div><div class="coluna2"><input name="inp1" type="text"/></div>
</div>
<div id="saida1"></div>
<div class="linha">
<div class="botoes">
<button id="add1">ADICIONAR</button>
<button id="del1">DELETAR</button>
</div>
</div>
</div>
<div class="container">
<div class="linha" id="linha2"><div class="coluna1"><label for="01">Segundo:</label></div><div class="coluna2"><input name="inp2" type="text"/></div>
</div>
<div id="saida2"></div>
<div class="linha">
<div class="botoes">
<button id="add2">ADICIONAR</button>
<button id="del2">DELETAR</button>
</div>
<div class='botoes'>
<button id='concluir'>CONCLUIR</button>
</div>
<div class="linha"><textarea id="resultado" readonly="readonly"></textarea>
</div>
</div>
</div>
<!-- template 1 -->
<template id="template1">
<div class="linha" id="linha1"><div class="coluna1"><label for="0">Primeiro:</label></div><div class="coluna2"><input name="inp1" class="0" type="text"/></div>
</div>
</template>
<!-- template 2 -->
<template id="template2">
<div class="linha" id="linha2"><div class="coluna1"><label for="0">Segundo:</label></div><div class="coluna2"><input name="inp2" class="0" type="text"/></div>
</div>
</template>