Что делать, если цикл повторяется в 2 разных областях

Код получает значения input и отправляет их в textarea, но когда вы добавляете более одного title, значения повторяются в результате titles, например, DESCRIPTIONS из title 1 такие же, как в title 2, почему это случилось? а как заставить работать, не меняя назначения?

Run the code in codepen.io or jsfiddle.net


Вот что происходит:
Что делать, если цикл повторяется в 2 разных областях
Вот что должно получиться:
Что делать, если цикл повторяется в 2 разных областях

function result() {
  var inp2 = document.getElementsByName("inp2");
  var titu = document.getElementsByName("titu");
  var res = document.getElementById("result");
  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.info("test")
  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`;
      }
    }
 }
};

// -----------------------------------------
if (document.getElementById("add2")) {
let cont2 = 1;
document.getElementById("add2").onclick = function clone2() {
  let container2 = document.getElementById("output2");  
  let tempLinha2 = document.querySelector('#template2'); 
  let clone2 = document.importNode(tempLinha2.content, true); 
  
  const label2 = clone2.querySelector("label");
  label2.htmlFor = cont2;
  clone2.querySelector("input").className = cont2;
  
  container2.appendChild(clone2);
  cont2++;
};
document.getElementById("del2").onclick = function del2() {
    document.querySelector('#output2 #linha2:last-child').remove();
};
}
// ---------------------------------------
if (document.getElementById("addtit")) {
let cont3 = 1;
document.getElementById("addtit").onclick = function clone3() {
  let container3 = document.getElementById("output2");  
  let tempLinha3 = document.querySelector('#template3');
  let clone3 = document.importNode(tempLinha3.content, true); 
  
  const label3 = clone3.querySelector("label");
  label3.htmlFor = cont3;
  clone3.querySelector("input").className = cont3;
  
  container3.appendChild(clone3);
  cont3++;
  document.getElementById('add2').id = 'add3';
  document.getElementById('del2').id = 'del3';
};
document.getElementById("deltit").onclick = function deltit() {
    document.querySelector('#output2 #alg:last-child').remove();
    document.getElementById('add3').id = 'add2';
    document.getElementById('del3').id = 'del2';
};
}
// -----------------------------------------
if (document.getElementById("add3")) {
let cont4 = 1;
document.getElementById("add3").onclick = function clone4() {
  let container4 = document.getElementById("output3");  
  let tempLinha4 = document.querySelector('#template2');
  let clone4 = document.importNode(tempLinha4.content, true); 
  
  const label4 = clone4.querySelector("label");
  label4.htmlFor = cont4;
  clone4.querySelector("input").className = cont4;
  
  container4.appendChild(clone4);
  cont4++;
};
document.getElementById("del3").onclick = function del4() {
  document.querySelector('#output3 #linha2:last-child').remove();
};
}
<div class = "container">
<button id = "addtit">+ TITLE</button>
<button id = "deltit">- TITLE</button>
<button id = "add2">+ DESCRIPTION</button>
<button id = "del2">- DESCRIPTION</button>
<div id = "output2"></div>
<div class='botoes'>
<button onclick = "result()" id='done'>DONE</button>
</div>
<div class = "header"><span class = "title">RESULT</span>
</div>
<div class = "linha"><textarea id = "result"></textarea>
</div>
</div>
  

<!-- template 2 -->
<template id = "template2">
<div class = "linha" id = "linha2"><div class = "coluna1"><label for = "0">DESCRIPTION:</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">TITLE:</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">DESCRIPTION:</label></div><div class = "coluna2"><input name = "inp2" class = "0" type = "text"/></div>
</div>
<div id = "output3"></div>
</div>
</template>

🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.


1
88
1

Ответ:

Хорошо. это потому, что эта часть кода в результате функции:

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`;
        }
      }
    }
  }
}

ваши заголовки имеют одинаковые имена: 'titu', и ваши описания имеют такие же имена: 'inp2',
, и у вас есть два вложенных цикла для каждого заголовка, цикл по описанию, и это результат, как вы видите. лучше изменить свой код и сделать другие имена и идентификаторы
Кстати. если вы настаиваете на том, чтобы не менять свой код, вы должны использовать один цикл для них обоих, как этот код

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`;
        if (inp2[k].value.trim() != '') {
         res.value += `<li>${inp2[k].value.trim()}</li>\n`;
      }
    }
  }
}

ОБНОВИТЬ
в случае более подробного описания для каждого заголовка вам необходимо изменить код методов onClick для Title + и Description +, добавленный заголовок и все его описание должны иметь один и тот же родительский элемент, и после этого можно решить проблему, подобную этой . (при условии, что родитель, о котором я уже говорил, имеет имя класса «родительский»)

function result() {
    var parents = document.querySelectorAll(".parent")
    parents.forEach(function(parent){
       var title = parent.querySelector("titu");
       var descriptions = parent.querySelectorAll("inp2");
       var res = document.getElementById("result");
       if (title.value.trim() != '') {
           res.value += `<div>
           <span>${title.value.trim()}</span>
           </div>
           <ul>\n`;
       }
       descriptions.forEach(function(inp2){
          if (inp2.value.trim() != '') {
             res.value += `<li>${inp2.value.trim()}</li>\n`;
          }
       });
    }); 
}

обратите внимание, что этот код может работать после изменения событий Title + и Description + и добавления того же родителя с родителем имени класса во входные данные заголовка и описания.