Выдвигающаяся боковая корзина реализация на JS

Как реализовать, чтобы при добавлении товара в корзину она выдвигалась сбоку уже с имеющимися товарами в корзине без перезагрузки? Сама корзина:

<div class="cart-bg-overlay"></div>

<div class="right-side-cart-area" id="cart-modal">

    <!-- Cart Button -->
    <div class="cart-button">
        <a href="#" id="rightSideCart"><img src="<? PATH ?>/assets/img/core-img/bag.svg" alt=""> <span> <?= $_SESSION['cart.qty'] ?? 0 ?> </span></a>
    </div>

    <div class="cart-content d-flex">
        <?php if (!empty($_SESSION['cart'])): ?>

        <!-- Cart List Area -->
        <div class="cart-list">
            <!-- Single Cart Item -->
            <div class="single-cart-item">
                <?php foreach ($_SESSION['cart'] as $id => $item): ?>
                <span class="product-image">
                    <img src="<?= PATH . $item['img'] ?>" class="cart-thumb" alt="">
                    <!-- Cart Item Desc -->
                    <div class="cart-item-desc">
                        <a class="product-remove" href="cart/delete?id=<?= $id ?>" data-id="<?= $id ?>"> <i class="fa fa-close" > </i> </a>
                        <span class="badge"> <?= $item['title'] ?> </span>
                        <h6> <a href="product/<?= $id ?>"> <?= $item['name'] ?> </a> </h6>
                        <p class="size">Мл: S</p>
                        <p class="color">Количество: <?= $item['qty'] ?> шт.</p>
                        <p class="price"><?= $item['price'] ?> руб. </p>
                    </div>
                </span>
                <?php endforeach; ?>
            </div>
        </div>
        <?php else: ?>
            <h4 class="text-start">Empty cart</h4>
        <?php endif; ?>

JS переменные:

var cartbtn1 = $('#essenceCartBtn');
    var cartOverlay = $(".cart-bg-overlay");
    var cartWrapper = $(".right-side-cart-area");
    var cartbtn2 = $("#rightSideCart");
    var cartOverlayOn = "cart-bg-overlay-on";
    var cartOn = "cart-on";

    cartbtn1.on('click', function () {
        cartOverlay.toggleClass(cartOverlayOn);
        cartWrapper.toggleClass(cartOn);
    });
    cartOverlay.on('click', function () {
        $(this).removeClass(cartOverlayOn);
        cartWrapper.removeClass(cartOn);
    });
    cartbtn2.on('click', function () {
        cartOverlay.removeClass(cartOverlayOn);
        cartWrapper.removeClass(cartOn);
    });

Функция показа корзины

    function showCart(cart) {
        без понятия как ее сюда вывести;

    }

Добавление по клику

$('.add-to-cart').on('click', function (e) {
        e.preventDefault();
        const id = $(this).data('id');
        const qty = $('#input-quantity').val() ? $('#input-quantity').val() : 1;
        const $this = $(this);

        $.ajax({
            url: 'cart/add',
            type: 'GET',
            data: {id: id, qty: qty},
            success: function (res) {
                showCart(res);
            },
            error: function () {
                alert('Error');
            }
        })

    });