Проблемы разработки календаря с JS

Question

Я разрабатываю календарь с нуля, используя JS и boostrap, и у меня возникла проблема при попытке выбрать одну из ячеек календаря. Календарь состоит из тела (данные генерируются динамически в зависимости от выбранной даты), двух кнопок для go предыдущего и назад в месяцах и выбора для перехода к определенной c дате.

Я использую функции removeClass () и addClass (), чтобы узнать, какая ячейка нажата (в данный момент только для изменения ее цвета), но когда я нажимаю в «предыдущий» или кнопки «Далее» и тело календаря загружает новые данные, функция JS, чтобы определить, какая ячейка нажата, не работает . Это JS код:

$(document).ready(function() {
    "use strict";
    var template = document.title;
    if (template.includes("Timetables Layout")) {
        /*Fecha actual*/
        let today = new Date();
        let currentMonth = today.getMonth();
        let currentYear = today.getFullYear();

        /*Mostrar el calendario*/
        var values = [currentYear - 1, currentYear, currentYear + 1];
        let selectYear = document.getElementById("year");
        selectYear.options[0] = new Option(values[0].toString(), values[0]);
        selectYear.options[1] = new Option(values[1].toString(), values[1]);
        selectYear.options[2] = new Option(values[2].toString(), values[2]);
        let selectMonth = document.getElementById("month");
        let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        let monthAndYear = document.getElementById("monthAndYear");
        showCalendar(currentMonth, currentYear);

        /*Eventos para los botones y el select*/
        document.getElementById("previous").addEventListener("click", function() {
            currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
            currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
            if (values.includes(currentYear)) {
                showCalendar(currentMonth, currentYear);
            }
        });
        document.getElementById("next").addEventListener("click", function() {
            currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
            currentMonth = (currentMonth + 1) % 12;
            if (values.includes(currentYear)) {
                showCalendar(currentMonth, currentYear);
            }
        });
        document.getElementById("month").addEventListener("change", function() {
            currentYear = parseInt(selectYear.value);
            currentMonth = parseInt(selectMonth.value);
            showCalendar(currentMonth, currentYear);
        });
        document.getElementById("year").addEventListener("change", function() {
            currentYear = parseInt(selectYear.value);
            currentMonth = parseInt(selectMonth.value);
            showCalendar(currentMonth, currentYear);
        });
        /*Funcion para mostrar el calendario*/
        function showCalendar(month, year) {
            let firstDay = (new Date(year, month)).getDay();
            let daysInMonth = 32 - new Date(year, month, 32).getDate();
            let tbl = document.getElementById("calendar-body"); // body of the calendar
            // clearing all previous cells
            tbl.innerHTML = "";
            // filing data about month and in the page via DOM.
            monthAndYear.innerHTML = months[month] + " " + year;
            selectYear.value = year;
            selectMonth.value = month;
            // creating all cells
            let date = 1;
            for (let i = 0; i < 6; i++) {
                // creates a table row
                let row = document.createElement("tr");
                //creating individual cells, filing them up with data.
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j < firstDay) {
                        let cell = document.createElement("td");
                        let cellText = document.createTextNode("");
                        cell.appendChild(cellText);
                        row.appendChild(cell);
                    }
                    else if (date > daysInMonth) {
                        break;
                    }
                    else {
                        let cell = document.createElement("td");
                        let cellText = document.createTextNode(date);
                        if (date === today.getDate() && year === today.getFullYear() && month === today.getMonth()) {
                            cell.classList.add("bg-info");
                        } // color today's date
                        cell.appendChild(cellText);
                        row.appendChild(cell);
                        date++;
                    }
                }
                tbl.appendChild(row); // appending each row into calendar body.
            }
        }
        /*Funciones al clicar el calendario*/
        $('td').click(function(){
            $('#calendar-body > tr > td.bg-info').removeClass('bg-info');
            $(this).addClass('bg-info');
            var date = $('#monthAndYear').text();
            console.log(date);
            console.log($(this).text());
        });
    }
});

HTML код:

<div class="container">
 <h3 class="card-header" id="monthAndYear"></h3>
  <table class="table table-bordered table-responsive-sm" id="calendar">
   <thead>
   <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
   </tr>
   </thead>
   <tbody id="calendar-body">
   </tbody>
  </table>
  <div class="form-inline">
   <button class="btn btn-outline-primary col-sm-6" id="previous" >Previous</button>
   <button class="btn btn-outline-primary col-sm-6" id="next" >Next</button>
  </div>
  <br />
  <form class="form-inline">
   <label class="lead mr-2 ml-2" for="month">Jump To: </label>
   <select class="form-control col-sm-4" name="month" id="month">
    <option value="0">Jan</option>
    <option value="1">Feb</option>
    <option value="2">Mar</option>
    <option value="3">Apr</option>
    <option value="4">May</option>
    <option value="5">Jun</option>
    <option value="6">Jul</option>
    <option value="7">Aug</option>
    <option value="8">Sep</option>
    <option value="9">Oct</option>
    <option value="10">Nov</option>
    <option value="11">Dec</option>
   </select>
   <label for="year"></label>
   <select class="form-control col-sm-4" name="year" id="year">
   </select>
 </form>
</div>

Любое предложение?

Спасибо для чтения!