[FIXED] Ajax addEventListener stops working after first click

Issue

I am trying to populate a calendar with Ajax with Django backend. The code works just fine when I load the page and click id="wp-calendar-nav-next" and it populates the calendar as per my requirement. However it doesn't work after the first click. How do I recode it to make sure id="wp-calendar-nav-next" works constantly. I am trying to fix this before coding id="wp-calendar-nav-prev".

<div class="widget-calendar-container " id="django-calendar">

    <div class="calendar-header">
        <div class="wp-calendar-nav-prev" id="wp-calendar-nav-prev">
            <a>Jan</a>
        </div>
        <div class="calendar-title" id="cur_mon">{{ activity_month|title }}</div>
        <div class="wp-calendar-nav-next" id="wp-calendar-nav-next">
            <a>Mar</a>
        </div>
    </div>

    <table id="wp-calendar" class="wp-calendar-table">
        <thead>
            <tr>
                <th scope="col" title="Sunday">Sun</th>
                <th scope="col" title="Monday">Mon</th>
                <th scope="col" title="Tuesday">Tue</th>
                <th scope="col" title="Wednesday">Wed</th>
                <th scope="col" title="Thursday">Thu</th>
                <th scope="col" title="Friday">Fri</th>
                <th scope="col" title="Saturday">Sat</th>
            </tr>
        </thead>
        <tbody id="ajax-calendar">
            <tr>
                {% for day in c_monthdays %}
                <td {% if day == activity_day %} class="calendar-viewing" {% endif %}>
                    <div class="calendar-day-content">
                        {% if day == 0 %}
                        {% else %}
                        <a href="{% url 'calendermonthday' activity_month day %}" class="ga-calendar-day-link">
                        {{ day }}
                        {% endif %}
                        </a>
                    </div>
                </td>
                {% if forloop.last %} </tr> {% elif forloop.counter|divisibleby:"7" %} </tr> <tr> {% endif %}
                {% endfor %}
        </tbody>
    </table>

</div>

Below is the script:

<script>
    const loadBtnNext = document.getElementById('wp-calendar-nav-next');
    function load_next_month() {
        var current_month = document.getElementById('cur_mon').textContent;
        const content_container = document.getElementById("django-calendar");
        $.ajax({
            url: '{% url "load_next_month" %}',
            type: 'GET',
            data: {
                'current_month': current_month
            },
            beforeSend: function () {
            },
            success: function (response) {
                const content_container_new = response.content_container_new
                content_container.innerHTML = `${ content_container_new }`

            },
            error: function (err) {
                console.log(err);
            },
        });
    }
    loadBtnNext.addEventListener('click', () => {
        load_next_month()
    });
</script>

Solution # 1: Again works the first time and doesn't work again

$('#wp-calendar-nav-next').on('click', 'a', function(){
    load_next_month()
});

Solution # 2: This solution works perfectly.

$(document).on('click', '.wp-calendar-nav-next', function(){
  load_next_month()
});

Solution

Solution # 2 worked in my case:

$('#django-calendar').on('click', '.wp-calendar-nav-next', function(){
  load_next_month()
});

Answered By - Humair Noor