clearInterval() not working in functions

Question

I am facing a issues while clearInterval. Please check this link and click in HERE several times. Then you can see the problem which I am facing. The goal is when user clicks on HERE then setInterval should be cleared and start from 1 again. You can also check my code below

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<div class="otpIcon">
    <span class="resend">
        Click <a href="javascript:void(0)" id="resendForgotPasswordOtpLink" data-url="/user/resend-forgot-password-otp">HERE</a> to resend OTP
    </span>
    <span class="setTimer" style="display: inline;">
        You will get OTP within <span class="timer">6 seconds</span>
    </span>
</div>

function otpTimer(container, count) {
    container.find('timer').html(count + ' seconds');
    setInterval(function() {
        if (count < 1) {
            container.find('.resend').show();
            container.find('.setTimer').hide();
        } else {
            count--;
            container.find('.timer').html(count + ' seconds');
        }
    }, 1000);
}

function stopOtpTimer(clearme) {
    window.clearInterval(clearme);
}

$('#resendForgotPasswordOtpLink').click(function(e) {
    alert('sdf')
    var count = 30;
    var container = $('.otpIcon');
    var timer;

    container.find('.resend').show();
    container.find('.setTimer').show();

    stopOtpTimer(timer);
    timer = otpTimer(container, count);
})