Работа с кнопками слайдера с помощью JS. Как и почему?

Danny Arty, мне нужно именно поработать с кнопками для самих карточек в моем слайдере. Там не просто изображения, там карточки с животными, при нажатии на которые появляются, а потом по нажатии на ещё одну кнопку исчезают всплывающие окна с профилями животных.

Работа с кнопками слайдера с помощью JS. Как и почему?

JDayS, что конкретно нужно мне и как сделать, что бы не перечислять каждую кнопку в отрыве друг от друга?

Работа с кнопками слайдера с помощью JS. Как и почему?

spoiler

const buttonKetrine = document.querySelector(".button-slider--katrine");
const openKetrine = document.querySelector(".profile-window--katrine");
const buttonJennifer = document.querySelector(".button-slider--jennifer");
const openJennifer = document.querySelector(".profile-window--jennifer");
const buttonWoody = document.querySelector(".button-slider--woody");
const openWoody = document.querySelector(".profile-window--woody");
const buttonSophia = document.querySelector(".button-slider--sophia");
const openSophia = document.querySelector(".profile-window--sophia");
const buttonTimmy = document.querySelector(".button-slider--timmy");
const openTimmy = document.querySelector(".profile-window--timmy");
const buttonCharly = document.querySelector(".button-slider--charly");
const openCharly = document.querySelector(".profile-window--charly");
const buttonScarlet = document.querySelector(".button-slider--scarlet");
const openScarlet = document.querySelector(".profile-window--scarlet");
const buttonFreddie = document.querySelector(".button-slider--freddie");
const openFreddie = document.querySelector(".profile-window--freddie");

const btnCloseKatrine = document.querySelector('#katrine');
const btnCloseJennifer = document.querySelector('#jennifer');
const btnCloseWoody = document.querySelector('#woody');
const btnCloseSophia = document.querySelector('#sophia');
const btnCloseTimmy = document.querySelector('#timmy');
const btnCloseCharly = document.querySelector('#charly');
const btnCloseScarlet = document.querySelector('#scarlet');
const btnCloseFreddie = document.querySelector('#freddie');

buttonKetrine.addEventListener('click', function(){
openKetrine.classList.toggle('profile-window--open');
});
btnCloseKatrine.addEventListener('click', function(){
openKetrine.classList.toggle('profile-window--open');
});

buttonJennifer.addEventListener('click', function(){
openJennifer.classList.toggle('profile-window--open');
});
btnCloseJennifer.addEventListener('click', function(){
openJennifer.classList.toggle('profile-window--open');
});

buttonWoody.addEventListener('click', function(){
openWoody.classList.toggle('profile-window--open');
});
btnCloseWoody.addEventListener('click', function(){
openWoody.classList.toggle('profile-window--open');
});

buttonSophia.addEventListener('click', function(){
openSophia.classList.toggle('profile-window--open');
});
btnCloseSophia.addEventListener('click', function(){
openSophia.classList.toggle('profile-window--open');
})

buttonTimmy.addEventListener('click', function(){
openTimmy.classList.toggle('profile-window--open');
});
btnCloseTimmy.addEventListener('click', function(){
openTimmy.classList.toggle('profile-window--open');
})

buttonCharly.addEventListener('click', function(){
openCharly.classList.toggle('profile-window--open');
});
btnCloseCharly.addEventListener('click', function(){
openCharly.classList.toggle('profile-window--open');
})

buttonScarlet.addEventListener('click', function(){
openScarlet.classList.toggle('profile-window--open');
});
btnCloseScarlet.addEventListener('click', function(){
openScarlet.classList.toggle('profile-window--open');
})

buttonFreddie.addEventListener('click', function(){
openFreddie.classList.toggle('profile-window--open');
});
btnCloseFreddie.addEventListener('click', function(){
openFreddie.classList.toggle('profile-window--open');
})