title: How to stop setInterval with loop process
body: <p>I'm writing a code that will popup a text wrapped in array and display each text with forEach function. Here's the sample code.</p>
  
  <pre><code>var hotSpots = 
  [
      {
          id : 'svc1',                                    // 1
          text: 'Radiator Repair',
          spotPosition: 'left: 0em; top: 14.5em',
          textPosition: 'left: -4em;',
          arrowPosition: 'left: 0.5em;',
      },
      {
          id : 'svc2',                                    // 2
          text: 'Headlight Blub Replacement / Repair',
          spotPosition: 'left: 3em; top: 13em',
          textPosition: 'left: -15em;',
          arrowPosition: 'left: 12em;',
      },
      {
          id : 'svc3',                                    // 3
          text: 'Engine Full Service / Repair',
          spotPosition: 'left: 9em; top: 9.5em',
          textPosition: 'left: -8em;',
          arrowPosition: 'left: 3em;',
      },
      {
          id : 'svc3b',                                   // 8
          text: 'Oil Charge &amp; Lube',
          spotPosition: 'left: 14em; top: 8.5em',
          textPosition: 'left: -6em;',
          arrowPosition: 'left: 3em;',
      },
      {
          id : 'svc4',                                    // 4
          text: 'Wiper / Wiper Motor Repair',
          spotPosition: 'left: 20em; top: 8em',
          textPosition: 'left: -0.5em;',
          arrowPosition: 'right: 12em;',
      },
      {
          id : 'svc5',                                    // 9
          text: 'Windsheild Repair / Replace',
          spotPosition: 'left: 28em; top: 5em',
          textPosition: 'right: -10em;',
          arrowPosition: 'right: 6em;',
      },
      {
          id : 'svc6',                                    // 11                      
          text: 'Window Regulators',
          spotPosition: 'left: 35em; top: 6em',
          textPosition: 'right: -7.8em;',
          arrowPosition: 'right: 6em;',
      },
      {
          id : 'svc7',
          text: 'Drive Axle Service',
          spotPosition: 'right: 3em; top: 6em',
          textPosition: 'right: -7.8em;',
          arrowPosition: 'right: 6em;',
      },
      {
          id : 'svc8',
          text: 'Tune-ups for better Fuel Efficentcy',
          spotPosition: 'right: 11.2em; top: 10.2em',
          textPosition: 'left: -7.5em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc9',
          text: 'Alignments',
          spotPosition: 'right: 1.7em; top: 13em',
          textPosition: 'left: -2em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc10',                                   // 13
          text: 'Exhaust Pipe and Mufflers Install / Repair',
          spotPosition: 'right: 3em; top: 20.5em',
          textPosition: 'left: -9em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc10b',                                 // 10
          text: 'ABS Brakes',
          spotPosition: 'right: 15.8em; top: 19em;',
          textPosition: 'left: -2.2em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc11',                                  // 
          text: 'Heating Systems',
          spotPosition: 'left: 38em; top: 11em',
          textPosition: 'left: -3.2em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc12',
          text: 'A/C Service',
          spotPosition: 'left: 12.5em; bottom: 4em',
          textPosition: 'left: -2em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc13',                                    // 6
          text: 'Tire Repair and Sales',
          spotPosition: 'left: 14em; bottom: 11.4em',
          textPosition: 'left: -4.3em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc14',                                   // 7
          text: 'Brake Systems',
          spotPosition: 'left: 11.5em; bottom: 7em',
          textPosition: 'left: -3em;',
          arrowPosition: 'left: -1.6em;',
      },
      {
          id : 'svc15',                                    // 5
          text: 'Suspension &amp; Steering',
          spotPosition: 'left: 14em; bottom: 13em',
          textPosition: 'left: -2em;',
          arrowPosition: 'left: -7em;',
      }
  ];
  </code></pre>
  
  <p>Here's how I extracted the data from var hotSpots.</p>
  
  <pre><code>hotSpots.forEach(function(data){
  
      var element = data.id;
  
      var popups = setInterval(function(i){
  
          $('.svchotSpotWrapper').removeClass('show');
  
          $('#'+element).addClass('show');
  
  
      }, 4000 + offset);    
  
      offset += 4000;
  
      $(document).on('click', '#'+element, function(){
  
          $('.svchotSpotWrapper').removeClass('show');
  
          $(this).addClass('show');
  
          clearInterval(popups);
  
      });
  
  });
  </code></pre>
  
  <p>The code above will output multiple dots, and what I am trying to achieve is when I click on a certain dot, the interval will stop.</p>
  
  <p>The following code is what I already tried:</p>
  
  <pre><code>$(document).on('click', '#'+element, function(){
  
      $('.svchotSpotWrapper').removeClass('show');
  
      $(this).addClass('show');
  
      clearInterval(popups);
  
  });
  </code></pre>
  
  <p>However, it doesn't stop the interval.</p>