I’m working on a Calendar on js, and I’m stuck with updating the month’s data. It somehow adding new data to previous one instead

First I tried to make one with InnerHTML and it worked just fine, but I have to add Listeners and InnerHTML is not an option now, so I switched to appendChild, and dates update, when you go to the next month collapsed, also I need to update content without destroying it, coz this calendar will be used for booking dates and time

const monthYearElement = document.getElementById('monthYear');
const datesElement = document.getElementById('dates');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

let currentDate = new Date();


const updateCalendar = () => {
    const currentYear = currentDate.getFullYear();
    const currentMonth = currentDate.getMonth();

    const firstDay = new Date(currentYear, currentMonth, 0);
    const lastDay = new Date(currentYear, currentMonth + 1, 0);
    const totalDays = lastDay.getDate();
    const firstDayIndex = firstDay.getDay();
    const lastDayIndex = lastDay.getDay();

    const monthYearString = currentDate.toLocaleString('ru-RU', {month: 'long', year: 'numeric'});
    monthYearElement.textContent = monthYearString;

for (let i = firstDayIndex; i > 0; i--) {
        const prevDate = new Date(currentYear, currentMonth, 0 - i + 1);
        let day = document.createElement('div');
        day.classList.add('date');
        day.classList.add('inactive');
        day.textContent = `${prevDate.getDate()}`;
        datesElement.appendChild(day)
    }

    for (let i = 1; i <= totalDays; i++) {
        const date = new Date(currentYear, currentMonth, i);
        let day = document.createElement('div');
        day.classList.add('date');
            if(date === currentDate){
                day.classList.add('today');
            }
        day.textContent = `${i}`;
        datesElement.appendChild(day)

    }

    for (let i = 1; i <= 7 - lastDayIndex; i++) {
        const nextDate = new Date(currentYear, currentMonth + 1, i);
        let day = document.createElement('div');
        day.classList.add('date');
        day.classList.add('inactive');
        day.textContent = `${nextDate.getDate()}`;
        datesElement.appendChild(day)
    }

    let days = document.querySelectorAll('.date');
    let week;
    for (let i = 0; i < days.length; i++) {
      if (i%7 === 0) {
        week = document.createElement('div');
        week.className = "week";
        datesElement.appendChild(week);
      }
      week.appendChild(days[i]);
    }
}
updateCalendar();




**prevBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    updateCalendar();
})

nextBtn.addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    updateCalendar();
})
**

Also current date class is not working anymore, it literally do nothing with ‘no code problem’ alerts

for (let i = 1; i <= totalDays; i++) {
        const date = new Date(currentYear, currentMonth, i);
        let day = document.createElement('div');
        **day.classList.add('date');
            if(date === currentDate){
                day.classList.add('today');
            }**
        day.textContent = `${i}`;
        datesElement.appendChild(day)

So What I need is:

1. to show new data with each month(not to add one to another) – update calendar with PrevBtn NextBtn functions, but without destroying content
2. add ‘today’ class to currentDate div

javascript