title: Uncaught ReferenceError: i is not defined
body: <p>I'm trying to make a for-loop base on my array</p>
  <p><code>var lists = [ &quot;a&quot;, &quot;b&quot;, &quot;c&quot;, &quot;d&quot; ];</code></p>
  <hr />
  <h1>JS</h1>
  <pre><code>for ( i = 0; i &lt; lists.length; i++) {
  
      // console.log(lists[i]);
  
      $(&quot;.sa-report-btn-&quot;+lists[i] ).click(function () {
          $(&quot;.sa-hide-&quot;+lists[i]).removeClass(&quot;hidden&quot;);
          $(&quot;.sa-report-&quot;+lists[i]).addClass(&quot;hidden&quot;);
      });
  
      $(&quot;.sa-hide-btn-&quot;+lists[i]).click(function () {
          $(&quot;.sa-hide-&quot;+lists[i]).addClass(&quot;hidden&quot;);
          $(&quot;.sa-report-&quot;+lists[i]).removeClass(&quot;hidden&quot;);
      });
  }
  </code></pre>
  <p>Am I doing it correctly ? I got <code>Uncaught ReferenceError: i is not defined</code>
  Can I concat each loop with my jQuery selector like this --&gt; <code>$(&quot;.sa-hide-&quot;+lists[i])</code> ? just curious ...</p>