I am struggling to add an EventListener to each Delete Button (1,2,3) as I keep encountering an error that says "add" is undefined. Do you have any suggestions on how to fix this issue? My goal is to display a confirmation window when the DELETE button is clicked
index.html
<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 1</button>
<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 2</button>
<div id="confirmWindow" class=" hidden">
<p>Are you sure want to delete?</p>
<button class="buttonYes">Yes</button>
<button class="buttonNo">No</button>
</div>
<button class="" id="trashIcon">Delete 3</button>
app.js
const deleteButton = document.querySelectorAll('#trashIcon');
const confirmWindow = document.querySelectorAll('#confirmWindow');
const buttonYes = document.querySelectorAll('.buttonYes');
const buttonNo = document.querySelectorAll('.buttonNo');
const openWindow = function (){
confirmWindow.classList.remove('hidden');
deleteButton.classList.add('hidden');
}
const closeDeleteWindow = function (){
confirmWindow.classList.add('hidden');
deleteButton.classList.remove('hidden');
}
for (let i=0; i < deleteButton.length; i++){
deleteButton[i].addEventListener('click', openWindow);
}
for (let i=0; i < buttonNo.length; i++){
buttonNo[i].addEventListener('click', closeDeleteWindow);
}