Where do I add the for Each loop to create new item every time?

Question

I know I must do a for each loop so that when a new task is created it adds the new task to the array and not replace the current one.

Currently my addEventListener is only creating a task.

let listArray = []

let date = Date.now()
let id = Math.floor((Math.random() + date) * 3000)

let add = document.querySelector("#add")


add.addEventListener("click", (event) => {

  let input = document.querySelector("#User-Input input")
  let list = document.querySelector(".list")
  list.classList.add("todo")

  list.innerHTML = `
        <div data-type="${id}"></div>
        <p>${input.value}</p>
        `

  listArray.push(list)
})

<div class="container">
  <div id="User-Input">

    <input id="text-area" type="text">
    <button id="add">Add</button>
  </div>

  <div class="list">

  </div>

Answer 1

Instead of overwriting list.innerHTML, you can append to it:

let listArray = []

let date = Date.now()
let id = Math.floor((Math.random() + date) * 3000)

let add = document.querySelector("#add")


add.addEventListener("click", (event) => {

  let input = document.querySelector("#User-Input input")
  let list = document.querySelector(".list")
  list.classList.add("todo")

  // HERE!
  list.innerHTML += `
        <div data-type="${id}"></div>
        <p>${input.value}</p>
        ` 

  listArray.push(list)
})

<div class="container">
  <div id="User-Input">

    <input id="text-area" type="text">
    <button id="add">Add</button>
  </div>

  <div class="list">

  </div>