Смотри, когда ты перебираешь массив, то вот тут:
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.
