Почему я не могу использовать метод forEach() для массива?

"use strict";
window.addEventListener("DOMContentLoaded", () => {
  const add = document.querySelector("#add"),
    input1 = document.querySelector("#input-1"),
    output = document.querySelector("#output"),
    sortByName = document.querySelector("#sort-by-name"),
    sortByValue = document.querySelector("#sort-by-value"),
    deleteItem = document.querySelector("#delete-item");

  add.addEventListener("click", () => {
    const nameValue = input1.value;
    if (/^([a-zA-Z0-9' ']+=[a-zA-Z0-9' ']+)$/.test(nameValue)) {
      output.textContent += nameValue + "\n";
    } else {
      alert("Sorry, you can put only alpha-numeric characters");
    }
  });

  sortByName.addEventListener("click", () => {
    const textareaName = output.value
      .toLowerCase()
      .trim("\n")
      .split("\n")
      .sort()
      .join("\n");
    output.textContent = null;
    output.textContent += textareaName + "\n";
  });

  sortByValue.addEventListener("click", () => {
    const textareaValue = output.value
      .toLowerCase()
      .trim("\n")
      .split("\n")
      .sort((a, b) => a.match(/\d+/)[0] - b.match(/\d+/)[0])
      .join("\n");
    output.textContent = null;
    output.textContent += textareaValue + "\n";
  });

  output.addEventListener("click", () => {
    const textareaValueForDelete = output.value
      .toLowerCase()
      .trim("\n")
      .split("\n");
    console.log(textareaValueForDelete);

    textareaValueForDelete.forEach(item => {
      item.style.backgroundColor = "grey";
      item.classList.toggle("selected");
    });
  });
});

body {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.items {
  margin: 0 auto;
  padding: 50px;
  list-style-type: none;
  max-width: 450px;
  display: grid;
  grid-template-columns: 75% 25%;
  justify-content: center;
  gap: 10px;
  color: #000000;
}

.title {
  margin: 0;
}

.items .item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

.items .item:nth-child(2) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

.items .item:nth-child(3) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  align-self: end;
}

.items .item:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.items .item:nth-child(5) {
  margin-top: 17.6px;
  grid-column: 2 / 3;
  grid-row: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

textarea {
  height: 200px;
  resize: none;
}

input,
textarea,
button {
  width: 90%;
  color: #000000;
  padding: 3px 5px;
  border-radius: 0;
  background-color: #ffffff;
  border: 1px solid #000000;
}

input:focus,
textarea:focus,
button:focus {
  outline: none;
}

button {
  width: max-content;
  cursor: pointer;
  background-color: rgb(243 238 238);
}

<ul class="items">
  <li class="item">
    <h1 class="title">Test</h1>
  </li>
  <li class="item">
    <label for="input-1">Name/Value Pair</label>
    <input type="text" id="input-1" name="input-1" placeholder="Name=Value" />
  </li>
  <li class="item">
    <button type="button" id="add">Add</button>
  </li>
  <li class="item">
    <label for="output">Name/Value Pair List</label>
    <textarea id="output" name="output"></textarea>
  </li>
  <li class="item">
    <button type="button" id="sort-by-name">Sort by Name</button>
    <button type="button" id="sort-by-value">Sort by Value</button>
    <button type="button" id="delete-item">Delete</button>
    <button type="button">Show XML</button>
  </li>
</ul>