Дмитрий Лукьянчук

Смотри, когда ты перебираешь массив, то вот тут:

arr.forEach(item => {
        outTitle += item.title
        outBody += item.body
    })

Ты не разбиваешь никак массив на карточки, ты пихаешь всё в данные одной карточку по факту, к тому же уже выбранную через card-title, а потом заново отображаешь её, перезаписывая весь HTML в карточке

Чтобы быстро поправить ситуацию, ты сейчас можешь сделать следующее:

Вынеси HTML, отвечающий за карточку, в функцию, ну например cardHTML:

function cardHTML(title, card) {
return ` <div class="card__item">
                <div class="card__header">
                    <p class="title">${title}</p>
                    <div class="header__buttons">
                        <button class="action__button done"><img src="./img/done.svg" alt=""></button>
                        <button class="action__button delete"><img src="./img/delete.svg" alt=""></button>
                    </div>
                </div>
                <div class="card__body">
                    <p class="body__text">${body}</p>
                </div>
            </div>`
}

Это позволит тебе вынести код, собственно формирующий отдельную карточку, удобно в одно место.

А потом по нажатию - не пробегайся по всему массиву туду через forEach, а просто сгенерируй карточку и добавь код в <div class="cards"> через .innerHTML += cardHTML(тут аргументы укажи). Считай это будет как array.push(), только для DOM.

Дальше ты столкнёшься с тем, как тебе с карточками работать дальше. Можешь добавить в этой функции, возвращающей HTML-представление, просто data-id к <div class="card__item" data-id="${id}">, ну и разумеется в параметрах функции надо предусмотреть какой-то id. Потом можно получить из карточки это через dataset: https://developer.mozilla.org/en-US/docs/Web/API/H...

Нежелательно для этого id использовать, например, индекс из самого массива - ты будешь удалять например задачи из массива, а имеющиеся карточки будут ссылаться своими id-шниками на "ужатый" массив. Лучше находи самый большой id в массиве (наверняка будет просто id последнего элемента) и присваивай.

Тогда точно не ошибёшься при поиске элемента в массиве на удаление.

Потом когда сделаешь сохранение данных в localStorage браузера (простейшая вещь), а не просто в текущую память, с помощью такой функции создания HTML тебе будет легко написать функцию первичного заполнения карточек - просто пробежишься так же по массиву и вызовешь функцию cardHTML.

const createArr = length =>
  Array.from({ length }, (_, i) =>
    Array.from({ length }, (_, j) =>
      (i === j || i === length - j - 1) +
      ((i <= j && i <= length - j - 1) || (i >= j && i >= length - j - 1))
    )
  );