Получить VALUE с динамически сгенерированной BUTTON

В js генерирую календарь, не получается корректно получить value из нажатой кнопки.

Функция генератор:

function createInfoOnWidget (...) {
    ...
    for (i = 1; i < lenCalRow; i++) {
        var rowCal = calendarRow[i];
        for (n = 1; n <= 7; n++) {
            let div = document.createElement('div');
            let but = document.createElement('button');
            but.className = 'calendar';
            if (count_past < firstDayMonth) {
                div.textContent = countDaysPastMonth;
                but.value = countDaysPastMonth;
                count_past++;
                countDaysPastMonth++;
            } else {
                if (count <= countCurMonthDays) {
                    div.textContent = count;
                    but.value = count;
                    but.onclick = (e) => { console.log(e.target.value) };
                    count++;
                } else {
                    div.textContent = count_fut;
                    but.value = count_fut;
                    count_fut++;
                };
            }

            but.appendChild(div);
            rowCal.appendChild(but);
        };
    };
    calendarButDate = document.querySelectorAll('.calendar');
};

• Пытался получить данные, добавлением каждой созданной кнопке функции - часть кнопок показывает значения, часть нет. • Пытался получить данные через функцию:

$(document).ready(function () {
    let calendarButDate = document.querySelectorAll('.calendar_widget__body_day_date');
    
    ...

    calendarButDate.forEach( btnDate => {
        btnDate.addEventListener('click', f)
    }); 
    function f(e) {
        console.log(e.target.value);
    };

});

Работает - опять же частично, когда в виджете меняю месяц например - он перестраивается - значения меняются, данные forEach не прилетают.