Почему часть моего кода выполняется дважды?

Question

Я пишу код для создания календаря с использованием JQuery и HTML & CSS. Когда я запускаю этот код, он делает то, что должен, но мои даты заполняются дважды, поэтому у меня есть цифры 1-31 дважды на одной странице календаря. Это происходит в большей части моего кода над всем моим проектом, и я не понимаю, почему.

let createCalendarHTML = function () {
    var date_picker_element = $('.date-picker');
    var selected_date_element = $('.date-picker .selected-date');
    var dates_element = $('.date-picker .dates');

    var mth_element = $('.date-picker .dates .month .mth');
    var next_mth_element = $('.date-picker .dates .month .next-mth');
    var prev_mth_element = $('.date-picker .dates .month .prev-mth');

    var days_element = $('.date-picker .dates .days');
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days_per_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth();
    var year = date.getFullYear();

    var selected_date = date;
    var selected_day = day;
    var selected_month = month;
    var selected_year = year;

    mth_element.text(months[month] + ' ' + year);

    selected_date_element.text(formatDate(date));

    populateDates();

    $(next_mth_element).on('click', function () {
        month++;
        if (month > 11) {
            month = 0;
            year++;
        }
        mth_element.text(months[month] + ' ' + year);
    });
    $(prev_mth_element).on('click', function () {
        month--;
        if (month < 0) {
            month = 11;
            year--;
        }
        mth_element.text(months[month] + ' ' + year);
    });

    function formatDate(d) {
        var day = d.getDate();
        if (day < 10) {
            day = '0' + day;
        }
        var month = d.getMonth() + 1;
        if (month < 10) {
            month = '0' + month;
        }
        var year = d.getFullYear();
        return day + '/' + month + '/' + year;
    }

    function populateDates(e) {
        for (var i = 0; i < days_per_month[month]; i++) {
            days_element.append($("<div class='day'></div>").text(i+1));
        }
    }
};
return {
    init: init,
    openCalendar: openCalendar,
    createCalendarHTML: createCalendarHTML
};