clearInterval problem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Timer</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"
            integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
            crossorigin="anonymous"></script>
    <style>
        #timer {
            font-size: 5em;
        }
    </style>
</head>
<body>
<div id="timer">
    <span id="hours" class="timer">00</span>:
    <span id="minutes" class="timer">00</span>:
    <span id="seconds" class="timer">00</span>
    <button id="start-timer">Start</button>
    <button id="stop-timer">Stop</button>
</div>
<!--<script src="timer.js"></script>-->
<script>
    window.onload = function () {
        timer();
    }
</script>
<script>

    function timer() {
        let tick = 0;
        let clockOn=false;

        let myInterval = function () {
            if(clockOn===false){
                setInterval(step, 1000);
            }
            else{
                return;
            }
            clockOn=true;
        };


        function step() {
            tick++;
            let seconds = ('0' + tick % 60).slice(-2);
            $('#seconds').text(seconds);
            let minutes = ('0' + Math.floor(tick / 60)).slice(-2);
            $('#minutes').text(minutes);
            let hours = ('0' + Math.floor(minutes / 60)).slice(-2);
            $('#hours').text(hours);
        }

        function myStopFunction() {
            clearInterval(myInterval);
            console.log('clear');
        }


        $('#start-timer').on('click', myInterval);


        $('#stop-timer').on('click', myStopFunction);
    }


</script>
</body>
</html>