не применяется класс

имеется календарь в который передаю массивы с датами, на календаре эти диапазоны дат закрашиваются, однако почему-то не хочет закрашиваться первый день каждого диапазона дат

var voucher = $('div.hidden').data('voucher');
var room = $('div.hidden').data('room');


const calendarGrid = document.querySelector('.calendar-grid');
const monthName = document.querySelector('.month-name');
const prevMonthBtn = document.querySelector('.prev-month');
const nextMonthBtn = document.querySelector('.next-month');

let currentDate = new Date();

function populateCalendarGrid() {
  const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
  const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
  const daysInMonth = lastDayOfMonth.getDate();

  calendarGrid.innerHTML = '';

  let dateCounter = 1;

  for (let i = 0; i < 6; i++) {
    for (let j = 0; j < 7; j++) {
      const cell = document.createElement('div');
      cell.classList.add('calendar-cell');

      if (i === 0 && j < firstDayOfMonth.getDay()) {
        // пустая ячейка перед первым днем месяца
      } else if (dateCounter > daysInMonth) {
        // Пустая ячейка после последнего дня месяца
      } else {
        const currentDates = new Date(currentDate.getFullYear(), currentDate.getMonth(), dateCounter);


        voucher.forEach(function(item) {
          room.forEach(function(rm) {
           
            if (currentDates >= new Date(item.arrival_date) && currentDates <= new Date(item.date_departure) && item.number_room == rm.number_room ) {
        cell.classList.add('range-date');
 
      }
});
});      

        cell.textContent = dateCounter;

 
      
        dateCounter++;
      }

      calendarGrid.appendChild(cell);
    }
  }
}



function updateMonthName() {
  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
  const monthIndex = currentDate.getMonth();
  const year = currentDate.getFullYear();
  monthName.textContent = `${monthNames[monthIndex]} ${year}`;
}


populateCalendarGrid();
updateMonthName();

prevMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() - 1);
  populateCalendarGrid();
  updateMonthName();
});

nextMonthBtn.addEventListener('click', () => {
  currentDate.setMonth(currentDate.getMonth() + 1);
  populateCalendarGrid();
  updateMonthName();
});