ajax ссылка на модальное окно без перезагрузки

Может я конечно не правильно сформулировал тему вопроса, но суть такая. Есть модальное окно корзины, оно вызывается кнопкой(изображением) в нем счетчик товаров добавленных в карзину.Сделал что бы по кнопке добавить в карзину на карте товара, кнопка модального окна становится active, но оно становится активным только после перезагрузки страницы. Как сделать, что бы это происходило без перезагрузки? Заранее спасибо.

<div>
    <a class="d-flex " id="modalButton"aria-expanded="false">
        <img class="mx-1 {% if carts.total_quantity >= 1 %} active {% endif %}" src="{% static "icons/basket2-fill.svg" %}" alt="Catalog Icon" width="24" height="24">
        <span id="goods-in-cart-count">{{ carts.total_quantity }}</span>
    </a>
</div>
<!-- Разметка модального окна корзины -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h3 class="text-center mb-4">Корзина</h3>
                <div class="container" id="cart-items-container">
                    <!-- Разметка корзины -->
                    {% include "carts/includes/included_cart.html" %}
                    <!-- Закончилась разметка корзины -->
                </div>
            </div>
        </div>
    </div>

Ну вот что я наваял))) Так чисто, что бы вы понимали мой уровень в JS и google. В моем случае это естественно не работает. Ссылка active только после перезагрузки страницы . Но мне очень хочется, что бы все заработало.

 $(document).ready(function () {
    var successMessage = $("#jq-notification");
    var goodsInCartCount = $("#goods-in-cart-count");
    var modalButton = $("#modalButton");

    function updateLinkClass() {
        var cartCount = parseInt(goodsInCartCount.text() || 0);

        if (cartCount >= 1) {
            modalButton.addClass('active');
        } else {
            modalButton.removeClass('active');
        }
    }

    //вызываем функцию при загрузке страницы и после изменения количества товаров    
    updateLinkClass();

    // Слушаем событие input на элементе, содержащем кол-во товаров в корзине
    goodsInCartCount.on("input", function() {
        updateLinkClass();
    // делаем post запрос через ajax не перезагружая страницу
    $.ajax({
            type: "POST",
            url: goodsInCartCount ,
            cache: false,
            data: $('active').serialize(),
            success: function (data) {

                $('modalButton').html(data);
            }
        
        
       });
    
    });

});

Вот что мне сегодня чат GPT нарисовал, но все равно не хочет код работать без перезагрузки.

   $(document).ready(function () {
           var successMessage = $("#jq-notification");
           var goodsInCartCount = $("#goods-in-cart-count");
           var modalButton = $("#modalButton");
       
           function updateCartCount() {
               $.ajax({
                   url: "update_cart.php",
                   type: "GET",
                   success: function(response) {
                       var cartCount = parseInt(response) || 0;
                       goodsInCartCount.text(cartCount);
                       updateLinkClass(cartCount);
                   },
                   error: function(xhr, status, error) {
                       console.error("Ошибка при выполнении AJAX запроса: " + error);
                   }
               });
           }
       
           function updateLinkClass(cartCount) {
               if (cartCount >= 1) {
                   modalButton.addClass('active');
               } else {
                   modalButton.removeClass('active');
               }
           }
       
           updateCartCount();
           setInterval(updateCartCount, 5000);
       
           // Обработка кликов и других событий
           $(document).on("click", ".add-to-cart", function (e) {
               // Обработчик добавления товара в корзину
           });
       
           $(document).on("click", ".remove-from-cart", function (e) {
               // Обработчик удаления товара из корзины
           });
       });
   });
});