JQuery clearInterval не работает для разных функций

var interval;

$(document).on('click', '#register-continue', function() {
  $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]').each(function() {
    if ($(this).val().length === 0) {
      interval = setInterval(function() {
        console.info('count')
        $('.modal-register-form :input[type=text], .modal-register-form :input[type=email], .modal-register-form :input[type=password]').each(function() {
          if (($(this).val().length != 0) && (!($(this).is(':focus')))) {
            $(this).css({
              border: '1px solid #e5e5e5'
            });
          }

          if (($(this).val().length === 0) && (!($(this).is(':focus')))) {
            $(this).css({
              border: '1px solid #fe0000'
            });
          }
        });
      }, 10);
    }
  });
});

$(document).on('click', '#register-submit', function() {
  clearInterval(interval);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "modal-register-form">
  <div class = "user-input">
    <input class = "first-name" type = "text" placeholder = "Vorname">
    <input class = "last-name" type = "text" placeholder = "Nachname">
  </div>
  <button type = "button" id = "register-continue" class = "register">continue</button>
  <button type = "button" id = "register-submit" class = "register">submit</button>
</div>