Javascript Timer Counter start again for every page reload

I build a timer to count Daily working time of employee. It is completely working fine until i refresh the page. I have three button clock in, stop, clock out. It should counting the time until I press the clock out button. What should I do in this case? I am not good with javascript so if anyone would love to help me, it would be great.

                       <form method="post" id="work-hour" action=""> 
                                {% csrf_token %}
                                <div class="card" id="holidays">
                                    <div class="card-header">
                                        <h5>Work Timer and Weekly Work History</h5>
                                        <div id="timeDiv"></div> 
                                        <br>
                                        <button id="startBtn" class="btn btn-outline-success Btn">Clock In</button>
                                        <!-- <button id="" class="Btn btn btn-outline-primary">Take a break</button> -->
                                        <button id="stopBtn" class="btn btn-outline-warning Btn">Stop</button>   
                                        <input type="text" hidden id="total_time_hour"  />
                                        <input type="text" hidden id="total_time_minute" />
                                        <input value="Clock Out" type="submit" id="submit" />                                    </div>
                                    
                                     </div>
                                
                       </form>

javascript

</script>
const csrftoken = getCookie('csrftoken');

    
        // include "are you sure" before reset

            var timeNow = {
            h: 0,
            m: 0,
            s: 0
            };

           
            function startTimer() {
            // start the timer

            counting = true;
            $('#stopBtn').prop("disabled", "");
            $('#startBtn').prop("disabled", "true");
            $('#resetBtn').prop("disabled", "true");
            $('#submit').prop("disabled", "true");
        
            
            countInterval = setInterval(count, 1000);
            }

            function stopTimer() {
            // stop the timer, but ask to confirm first
            if (!(areYouSure())) { return; }
            clearInterval(countInterval);
            var total_time = timeNow;
            console.log(total_time);
            $('#total_time_hour').val(timeNow.h)
            $('#total_time_minute').val(timeNow.m)


            //timeNow.h = 0;
            //timeNow.m = 0;
            //timeNow.s = 0;
            
            showTime();
            $('#startBtn').prop("disabled", "");
            $('#stopBtn').prop("disabled", "true");
            $('#resetBtn').prop("disabled", "");
            $('#submit').prop("disabled", "");
            
            }

            function areYouSure() {
            // let user confirm before stopping timer
            var sure = confirm("Are you sure you want to take a break?");
            return sure;
            }

            function showTime() {
            // put h/m/s together for display
            var hr, min, sec;
            if (timeNow.h < 1) {
            hr = "";
            }
            else {
            hr = "" + timeNow.h + ":";
            }
            if (timeNow.m < 1) {
            min = "00:";
            }
            else {
            if (timeNow.m < 10) {
            min = "" + "0" + timeNow.m + ":";
            }
            else {
            min = timeNow.m + ":";
            }
            }
            if (timeNow.s < 10) {
            sec = "" + "0" + timeNow.s;
            }
            else {
            sec = timeNow.s;
            }
            $('#timeDiv').html(hr + min + sec);
            }

            function count(){
            // increment the timer by 1s
            timeNow.s++;
            if (timeNow.s > 59) {
            timeNow.m++;
            timeNow.s = 0;
            }
            if (timeNow.m > 59) {
            timeNow.h++;
            timeNow.m = 0;
            }
            showTime();

            }

           

            function resetTimer() {
            // reset timer back to 0 after confirming
            if (!(areYouSure())) { return; }
            var total_time = timeNow;
            $('#total_time_hour').val(timeNow.h)
            $('#total_time_minute').val(timeNow.m)

            timeNow.h = 0;
            timeNow.m = 0;
            timeNow.s = 0;
            $('#resetBtn').prop("disabled", "true");
            $('#submit').prop("disabled", "true");
            showTime();
        }



        function submitTimer() {
            // reset timer back to 0 after confirming
            timeNow.h = 0;
            timeNow.m = 0;
            timeNow.s = 0;
            showTime();
            
        }

            $(document).ready(function() {
            showTime();
            $('#startBtn').click(function() { startTimer(); });
            $('#stopBtn').click(function() { stopTimer(); });
            $('#resetBtn').click(function() { resetTimer(); });
            $('#submit').click(function() { submitTimer(); });
            $('#stopBtn').prop("disabled", "true");
            $('#submit').prop("disabled", "true");
            $('#resetBtn').prop("disabled", "true");
            });

// add days?


        $(document).on('submit', '#work-hour', function(e){
            e.preventDefault();
            $.ajax({
                type:'POST',
                headers: {"X-CSRFToken": csrftoken},
                url: '/account/work/created/',
                data:{
                    total_time_hour: $('#total_time_hour').val(),
                    total_time_minute: $('#total_time_minute').val(),
                },
                success:function(){
                }
            });
        })

    </script>