title: MomentJS resetting/reusing DOM element to display new time
body: <p>I've struggled with this on 3 projects now and have abandoned the concept entirely each time. I want to have a single DOM element called <code>general_current-time</code> that can be dynamically changed to match the active location's current time.</p>
  
  <p>What currently happens is the first run will execute as expected, but any attempts to replace it will still continue to iterate through the first requested time.</p>
  
  <p>I've tried clearing the field or replacing the text before starting a new interval.</p>
  
  <p>Is there maybe a way to stop the interval and create a new one?</p>
  
  <p><strong>Sample Below (updated):</strong></p>
  
  <pre><code>    function getTime(timezone) {
          stopTime(currTime);
          switch (timezone) {
              case 'Eastern':
                  var b = "America/New_York"
                  break;
              case 'Central':
                  var b = "America/Mexico_City"
                  break;
              case 'Mountain':
                  var b = "America/Denver"
                  break;
              case 'Pacific':
                  var b = "America/Los_Angeles"
                  break;
              case 'Arizona':
                  var b = "America/Phoenix"
                  break;
          }
          var currTime = setInterval(function () {
              var a = new moment().tz(b).format('hh:mm:ss a');
              $('#general_current-time').text(a);
          }, 1000)
      }
  
      function stopTime(currTime) {
          $('#general_current-time').text('Resetting..');
          clearInterval(currTime);
      }
  </code></pre>