Fixed values and values in javascript looping

Question

The code below creates new input and send the values to textarea, as the number of input is undefined it was necessary to make a looping to catch the values through the name, it works normally if it’s just <li>${inp1[i].value.trim()}</li>, but I realized that I would need to add some other elements like <div>, <span> and the ul that was static and out of the loop, and also needed to add a second list with different values, as I know very little javascript I got enough and could 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>

Answer 1

Explanation in the code:

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 inp2 = document.getElementsByName("inp2");
  var res = document.getElementById("resultado");
  res.value = "";
  
  //Inicia o html
  res.value += `
    <div>
      <ol>
        <!-- Os valores do primeiro input aqui -->
  `;
  
  //Adiciona os primeiros
  for (var i = 0; i < inp1.length; i++) {
    if (inp1[i].value.trim() != '') {
      res.value += `<li>${inp1[i].value.trim()}</li>`
    }
  }
  
  //Continua o html
  res.value += `
      </ol>
    </div>
    <div>
      <ul>
        <!-- Os valores do segundo input aqui -->
  `;
  
  //Adiciona os segundos
  for (var i = 0; i < inp1.length; i++) {
    if (inp1[i].value.trim() != '') {
      res.value += `<li>${inp1[i].value.trim()}</li>`
    }
  }
  
  //Termina o html
  res.value += `
      </ul>
    </div>
  `;
};

<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>

That line inside the loop (res.value += "<div> ...) you are using concatenation ("texto " + variavel + " texto") and interpolation (`texto ${variavel} texto`), choose one and use only this