对动态创建的元素进行分组

Question

下面是我动态创建和删除文本框的功能，但是我正在寻找一种方法，可以将这些项目组合到一个文本框中（最好通过使用位于文本框下方或其他位置的按钮）。 ）。简而言之，我有四列，每列都有用于添加和删除文本框的这些功能，因此我还想知道，在对文本框进行分组之后，撤消功能现在是否会没有用？抱歉我在这方面的知识不足，并在此先感谢您的帮助

function addText(e) {
  let week = e.target.closest('.week'),
    area = week ? week.querySelector('textarea') : null,
    text = area ? area.value : '';
  if (text.length) {
    let item = document.createElement('p');
    item.innerText = text;
    week.appendChild(item);
    area.value = '';
  }
}

function removeText(e) {
  let week = e.target.closest('.week'),
    item = week ? week.querySelector('p:last-of-type') : null;
  if (item)
    item.remove()
}
document.body.addEventListener('click', event => {
  if (event.target.closest('[add-text]'))
    addText(event);
  if (event.target.closest('[remove-text]'))
    removeText(event);
})

<div id="planner">
  <div class="week week1">
    <div class="add">
      <h1>Weeks</h1>
      <textarea></textarea>
      <button type="button" add-text>Add text</button>
      <button type="button" remove-text>Undo</button>
    </div>
  </div>
  <div class="week week2">
    <div class="add">
      <h1>Topics</h1>
      <textarea></textarea>
      <button type="button" add-text>Add text</button>
      <button type="button" remove-text>Undo</button>
    </div>
  </div>