Jquery - Click active setinterval and clearinterval in another click event with on click

Question

I have a page where there is a form with a small button in the corner. When you press this button, it displays a summary of all the data you have filled in the form (it updates every 1s even if the summary page is closed). My problem now, is that I press a button on the summary which allows me to close the summary page, it closes the summary page but re-opens instantly (Without the setInterval it closes the summary page fine).

When I press the #summary-page-new-quote button, it outputs a summary of the data I typed into the page. If the summary page remains open, it needs to update, which is why I opted for a setInterval.

I put a clearInterval to stop the SetInterval but without success.

I show you a piece of my code:

Html code:

<div class="border border-primary bg-primary recapitulatif-page-new-quote border rounded">
    <div class="d-none recapitulatif-page-new-quote_value">
        <div class="display-flex">
            <img class="recapitulatif-page-new-quote_img2" src="/assets/images/icons/new-quote-active.svg" alt="recapitulatif-page-new-quote_img">
            <div class="recapitulatif-page-new-quote_valueTitle">Summary</div>
            <button type="button" class="close recapitulatif-page-new-quote_close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="recapitulatif-page-new-quote_title">
            <div class="display-flex recapitulatif-page-new-quote_title_value">
                <div class="recapitulatif-title text-primary font-weight-bolder">Customer information</div>
                <a href="#client" id="scrollClient">
                    <i class="far fa-edit text-black"></i>
                </a>
            </div>
            <span id="customer-information"></span>
        </div>
    </div>
</div>

JS code:

var intervalrecapitulatif = setInterval(function() {
    resumOpen()
});

function resumOpen() {
    $('body').on('click', '#recapitulatif-page-new-quote', function () {        
        $('.recapitulatif-page-new-quote').removeClass('bg-primary');
        $('.recapitulatif-page-new-quote').addClass('bg-white');
        $('.recapitulatif-page-new-quote_img').addClass('d-none');
        $('.recapitulatif-page-new-quote_value').removeClass('d-none');

        $('#customer-information').text($('#plant option:selected').text());
        $('.addresses_book :selected').each((i, e) => {
            var i = i +1;
            var ad = $(e);
            $('#recapitulatif-page-new-quote_step').append(`
                <div class="recapitulatif-page-new-quote_title sticky-step">
                    <div class="display-flex recapitulatif-page-new-quote_title_value">
                        <div class="recapitulatif-title text-primary font-weight-bolder">Step ${i < 10 ? '0' + i : i}</div>
                        <a href="#step" id="scrollStep${i}">
                            <i class="far fa-edit text-black"></i>
                        </a>
                    </div>
                    <span>${ad.text()}</span>
                </div>
            `);
            
        });
    })
}

$('body').on('click', '.recapitulatif-page-new-quote_close', function () {
    clearInterval(intervalrecapitulatif);
    $('.recapitulatif-page-new-quote').removeClass('bg-white');
    $('.recapitulatif-page-new-quote').addClass('bg-primary');
    $('.recapitulatif-page-new-quote_img').removeClass('d-none');
    $('.recapitulatif-page-new-quote_value').addClass('d-none');
});