jQuery timer function iterates through close and stop function

Question

I have written a small timer function. The goal is that when the div is visible, the timer starts and when I hide the div, the timer stops. Problem now is that as soon as I reopen and close the div it executes the functions multiple times after closing. The first values are with start = undefined (as declared at the end of the close function to reset it) and at the end with the correct value. I can't figure out exactly what the problem is. I already tried to remove the variables after closing and logging, but that somehow does nothing. The more often I open and close it without refreshing, the more often it goes through the functions after closing. My theory is that when I restart the function, it duplicates the var start and that's why it runs through all the var start when closing. See this thread: Declaring a Javascript variable twice in same scope - Is it an issue?

So basically its working, but the iterations before its doing with the actual var are destroying the accuracy.

jQuery(document).ready(function ($) {

    //hide on pageload
    $(".exp").css("display", "none");

    $('#expf').change(function () {
        var value = $(this).val();
        if (value === "Antwort1") {

            
            var start = 0;
            ff = 0;
            //here Start
            start = Date.now();
            console.log(start);
            console.log("yes");
            console.log('starting timer arbeitsauftrag');
            var timerlog2 = setInterval(timerlog, 2000);

            function timerlog() {
                const millis = Date.now() - start;
                ff = Math.floor(millis / 1000);
                console.log(ff);
            }
        }
        $(document).on("click", "div #schliessen", function () {
            // if ($("#Antwort1").is(":hidden")) {
            var ab = $(this).parent().attr('id');
            console.log(ab);
            //Zeit berechnen
            clearInterval(timerlog2);
            console.log("erster log" + start);
            if (start === undefined) {
                console.log("undefined" + start);
            } else {
                const millis = Date.now() - start;
                //console.log(`seconds elapsed = ${Math.floor(millis / 1000)}`);

                gg = Math.floor(millis / 1000);
                console.log(gg);
                console.log("zweiter log" + start);
                delete gg;
                start = undefined;
                //delete start;

           
            }
            // };
        });

    });

});

$(document).on("click", "div #schliessen", function () {
    $(this).parent().fadeOut();
    //$(this).parent().hide();
});

$("#expf").change(function () {
    if ($(this).val() === "Antwort1") {
        $("#" + $(this).val()).fadeIn();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>Too see my problem, you have to switch between nothing and Antwort 1 frequently to activate the timer and closing function. Open the Browser console to see the logs.</div>
<label for='expf'><b>Test:</b></label>
<select name='expf' id='expf'>
<option value=''>Nothing</option>
<option value='Antwort1'>Antwort1</option>
</select>


<div style="border:2px solid black;" class='exp' id='Antwort1'><input type='button' id='schliessen' value='X'>TEst</div>

Thanks in advance