How to reset recursive js counter?

Question

JavaScript

Hello!
There is a recursive counter (timer) in seconds.

<span class="start">Start</span>
<input type="text" id="timer" name="timer" value=1>

$('span.start').click(function(){
    var timer=1;
    var interval = 1000;
    var refresh = function() {
        $('#timer').val(timer);
        timerId = setTimeout(function() {
            timer++;
            refresh();
        }, interval);
    };
    refresh();
});

When you press the Start button, the counter starts from 1 second and starts working.
It is necessary to make it so that when you click on the Start button again, it is reset to 1.
Now this does not work. the counter takes an additional value = 1, and does not completely reset to 1.
Help with advice.

Answer 1

Why is there recursion at all? You can do great without it.

Answer 2

it is necessary to combine the variables timerId, timer and the clearTimeout function into one logical construct. and you will be happy.
and learn to write questions more clearly)