Почему javascript срабатывает только на одном блоке?

let calendars = [...document.querySelectorAll('.calendar')]
for (const [index, calendar] of calendars.entries()) {
  let now = new Date().toLocaleDateString()
  document.querySelector(`.heading-${index}`).innerText = now
  const month_names = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

isLeapYear = (year) => {
    return (year % 4 === 0 && year % 100 !== 0 && year % 400 !== 0) || (year % 100 === 0 && year % 400 === 0)
}

getFebDays = (year) => {
    return isLeapYear(year) ? 29 : 28
}

generateCalendar = (month, year, index) => {

    let calendar_days = document.querySelector(`.calendar-days${index}`)
    let calendar_header_year = document.querySelector(`#year-${index}`)

    let days_of_month = [31, getFebDays(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

    calendar_days.innerHTML = ''

    let currDate = new Date()
    if (!month) month = currDate.getMonth()
    if (!year) year = currDate.getFullYear()

    let curr_month = `${month_names[month]}`
    month_picker.innerHTML = curr_month
    calendar_header_year.innerHTML = year

    // get first day of month

    let first_day = new Date(year, month, 1)

    for (let i = 0; i <= days_of_month[month] + first_day.getDay() - 1; i++) {
        let day = document.createElement('div')
        if (i >= first_day.getDay()) {
            day.classList.add(`calendar-day-hover${index}`)
            day.innerHTML = i - first_day.getDay() + 1
            day.innerHTML += `<span></span>
                            <span></span>
                            <span></span>
                            <span></span>`
            if (i - first_day.getDay() + 1 === currDate.getDate() && year === currDate.getFullYear() && month === currDate.getMonth()) {
                day.classList.add(`curr-date${index}`)
            }
        }
        calendar_days.appendChild(day)
    }
}

let month_list = document.querySelector(`.month-list-${index}`)

month_names.forEach((e, i) => {
    let month = document.createElement('div')
    month.innerHTML = `<div data-month="${i}">${e}</div>`
    month.querySelector('div').onclick = () => {
        month_list.classList.remove('show')
        curr_month.value = i
        generateCalendar(i, obj[`curr_year${index}`], index)
    }
    month_list.appendChild(month)
})

let month_picker = document.querySelector(`#month-picker-${index}`)

month_picker.onclick = () => {
    month_list.classList.add('show')
}

let currDate = new Date()

let curr_month = { value: currDate.getMonth() }
let curr_year = { value: currDate.getFullYear() }
let obj = {
  [`curr_year${index}`]: currDate.getFullYear(),
  [`curr_month${index}`]: currDate.getMonth(),
}

generateCalendar(obj[`curr_month${index}`], obj[`curr_year${index}`], index)

document.querySelector(`#prev-year-${index}`).onclick = () => {
    --curr_year.value
 
       generateCalendar(curr_month.value, curr_year.value, index)
    

}

document.querySelector(`#next-year-${index}`).onclick = () => {
    ++curr_year.value
    generateCalendar(curr_month.value, curr_year.value, index)
}


document.addEventListener('click', addDate);

function addDate() {
    if (event.target.closest(`.calendar-day-hover${index}`)) {
        
        let numbers = document.querySelectorAll(`.calendar-day-hover${index}`);
        numbers = Array.from(numbers);

        numbers.forEach(function(item) {

            

                numbers.forEach(function(elem) {
                    // удаляем фон у всех дат
                    elem.classList.remove(`curr-date${index}`);

                });
            
        });
        //// добавляем фон кликнутой дате
        event.target.classList.add(`curr-date${index}`);

        let text = document.querySelector(`.heading-${index}`);

        /// получем месяц и год
        let month = document.querySelector(`#month-picker-${index}`);
        let date = document.querySelector(`#year-${index}`);

        /// добавляем дату в текст
        text.innerHTML = `${event.target.textContent} ${month.textContent}       ${date.textContent}`;
    }
}
}

:root {
    --dark-body: #4d4c5a;
    --dark-main: #141529;
    --dark-second: #79788c;
    --dark-hover: #323048;
    --dark-text: #f8fbff;
    --light-body: #f3f8fe;
    --light-main: #fdfdfd;
    --light-second: #c3c2c8;
    --light-hover: #edf0f5;
    --light-text: #151426;
    --blue: #0000ff;
    --white: #fff;
    --shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --font-family: cursive;
}

.dark {
    --bg-body: var(--dark-body);
    --bg-main: var(--dark-main);
    --bg-second: var(--dark-second);
    --color-hover: var(--dark-hover);
    --color-txt: var(--dark-text);
}

.light {
    --bg-body: var(--light-body);
    --bg-main: var(--light-main);
    --bg-second: var(--light-second);
    --color-hover: var(--light-hover);
    --color-txt: var(--light-text);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100vh;
    display: grid;
    place-items: center;
    font-family: var(--font-family);
    background-color: var(--bg-body);
}

.calendar {
    height: max-content;
    width: max-content;
    background-color: var(--bg-main);
    border-radius: 30px;
    /*padding: 20px;*/
    position: relative;
    overflow: hidden;
    /* transform: scale(1.25); */
}

.light .calendar {
    box-shadow: var(--shadow);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-txt);
    padding: 5px;
}

.calendar-body {
    padding: 5px;
}

.calendar-week-day {
    /*height: 50px;*/
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-weight: 600;
}

.calendar-week-day div {
    display: grid;
    place-items: center;
    color: var(--bg-second);
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    color: var(--color-txt);
}

.calendar-days div {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    position: relative;
    cursor: pointer;
    animation: to-top 1s forwards;
    /* border-radius: 50%; */
}

.calendar-days div span {
    position: absolute;
}

.calendar-days div:hover span {
    transition: width 0.2s ease-in-out, height 0.2s ease-in-out;
}

.calendar-days div span:nth-child(1),
.calendar-days div span:nth-child(3) {
    width: 2px;
    height: 0;
    background-color: var(--color-txt);
}

.calendar-days div:hover span:nth-child(1),
.calendar-days div:hover span:nth-child(3) {
    height: 100%;
}

.calendar-days div span:nth-child(1) {
    bottom: 0;
    left: 0;
}

.calendar-days div span:nth-child(3) {
    top: 0;
    right: 0;
}

.calendar-days div span:nth-child(2),
.calendar-days div span:nth-child(4) {
    width: 0;
    height: 2px;
    background-color: var(--color-txt);
}

.calendar-days div:hover span:nth-child(2),
.calendar-days div:hover span:nth-child(4) {
    width: 100%;
}

.calendar-days div span:nth-child(2) {
    top: 0;
    left: 0;
}

.calendar-days div span:nth-child(4) {
    bottom: 0;
    right: 0;
}

.calendar-days div:hover span:nth-child(2) {
    transition-delay: 0.2s;
}

.calendar-days div:hover span:nth-child(3) {
    transition-delay: 0.4s;
}

.calendar-days div:hover span:nth-child(4) {
    transition-delay: 0.6s;
}
.calendar-days div.curr-date0,
.calendar-days div.curr-date0:hover {
    background-color: red;
    color: var(--white);
    border-radius: 50%;
}

.calendar-days div.curr-date1,
.calendar-days div.curr-date1:hover {
    background-color: green;
    color: var(--white);
    border-radius: 50%;
}
   .calendar-days div.curr-date2,
.calendar-days div.curr-date2:hover {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 50%;
}

.calendar-days div.curr-date1 span {
    display: none;
}
 

.month-picker {
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
}

.month-picker:hover {
    background-color: var(--color-hover);
}

.year-picker {
    display: flex;
    align-items: center;
}

.year-change {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 10px;
    cursor: pointer;
}

.year-change:hover {
    background-color: var(--color-hover);
}

.calendar-footer {
    padding: 10px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.toggle {
    display: flex;
}

.toggle span {
    margin-right: 10px;
    color: var(--color-txt);
}

.dark-mode-switch {
    position: relative;
    width: 48px;
    height: 25px;
    border-radius: 14px;
    background-color: var(--bg-second);
    cursor: pointer;
}

.dark-mode-switch-ident {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background-color: var(--bg-main);
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left 0.2s ease-in-out;
}

.dark .dark-mode-switch .dark-mode-switch-ident {
    top: 2px;
    left: calc(2px + 50%);
}

.month-list {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--bg-main);
    padding: 20px;
    grid-template-columns: repeat(3, auto);
    gap: 5px;
    display: grid;
    transform: scale(1.5);
    visibility: hidden;
    pointer-events: none;
}

.month-list.show {
    transform: scale(1);
    visibility: visible;
    pointer-events: visible;
    transition: all 0.2s ease-in-out;
}

.month-list>div {
    display: grid;
    place-items: center;
}

.month-list>div>div {
    width: 100%;
    padding: 5px 20px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    color: var(--color-txt);
}

.month-list>div>div:hover {
    background-color: var(--color-hover);
}

.heading {
    color: tomato;
}

.block {
    display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div>
        <div class="block">
            <h2 class="heading-0">тут текст1</h2>
            <div class="light">
                <div class="calendar">
                    <div class="calendar-header">
                        <span class="month-picker" id="month-picker-0">February</span>
                        <div class="year-picker">
                            <span class="year-change" id="prev-year-0">
                            <pre><</pre>
                        </span>
                            <span id="year-0">2021</span>
                            <span class="year-change" id="next-year-0">
                            <pre>></pre>
                        </span>
                        </div>
                    </div>
                    <div class="calendar-body">
                        <div class="calendar-week-day">
                            <div>Sun</div>
                            <div>Mon</div>
                            <div>Tue</div>
                            <div>Wed</div>
                            <div>Thu</div>
                            <div>Fri</div>
                            <div>Sat</div>
                        </div>
                        <div class="calendar-days calendar-days0"></div>
                    </div>

                    <div class="month-list month-list-0"></div>
                </div>
            </div>
        </div>
        <div class="block">
            <h2 class="heading-1">тут текст2</h2>
            <div class="light">
                <div class="calendar">
                    <div class="calendar-header">
                        <span class="month-picker" id="month-picker-1">February</span>
                        <div class="year-picker">
                            <span class="year-change" id="prev-year-1">
                            <pre><</pre>
                        </span>
                            <span id="year-1">2021</span>
                            <span class="year-change" id="next-year-1">
                            <pre>></pre>
                        </span>
                        </div>
                    </div>
                    <div class="calendar-body">
                        <div class="calendar-week-day">
                            <div>Sun</div>
                            <div>Mon</div>
                            <div>Tue</div>
                            <div>Wed</div>
                            <div>Thu</div>
                            <div>Fri</div>
                            <div>Sat</div>
                        </div>
                        <div class="calendar-days calendar-days1"></div>
                    </div>

                    <div class="month-list month-list-1"></div>
                </div>
            </div>
        </div>
        <div class="block">
            <h2 class="heading-2">тут текст3</h2>
            <div class="light">
                <div class="calendar">
                    <div class="calendar-header">
                        <span class="month-picker" id="month-picker-2">February</span>
                        <div class="year-picker">
                            <span class="year-change" id="prev-year-2">
                            <pre><</pre>
                        </span>
                            <span id="year-2">2021</span>
                            <span class="year-change" id="next-year-2">
                            <pre>></pre>
                        </span>
                        </div>
                    </div>
                    <div class="calendar-body">
                        <div class="calendar-week-day">
                            <div>Sun</div>
                            <div>Mon</div>
                            <div>Tue</div>
                            <div>Wed</div>
                            <div>Thu</div>
                            <div>Fri</div>
                            <div>Sat</div>
                        </div>
                        <div class="calendar-days calendar-days2"></div>
                    </div>

                    <div class="month-list month-list-2"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>