title: The variable is not incrementing properly
body: <p>I have a webpage that examines users with some questions.
  When a person answers one question, it hides and another one comes up.
  I came up with a code that uses incrementation but it doesnt work.
  I also wrote exactly the same thing just using numbers instead of incrementing variable and it works perfect. What is the difference?</p>
  <p>This code works:</p>
  <pre class="lang-js prettyprint-override"><code>$(&quot;.questionBox&quot; + 0 + &quot; .answerButton&quot;).click(function() {
    $(&quot;.questionBox&quot; + 0).hide();
    $(&quot;.questionBox&quot; + 1).show();
    $(&quot;.answerButton&quot;).hide();
  });
  
  $(&quot;.questionBox&quot; + 1 + &quot; .answerButton&quot;).click(function() {
    $(&quot;.questionBox&quot; + 1).hide();
    $(&quot;.questionBox&quot; + 2).show();
    $(&quot;.answerButton&quot;).hide();
  });
  
  $(&quot;.questionBox&quot; + 2 + &quot; .answerButton&quot;).click(function() {
    $(&quot;.questionBox&quot; + 2).hide();
    $(&quot;.questionBox&quot; + 3).show();
    $(&quot;.answerButton&quot;).hide();
  });
  </code></pre>
  <p>But this one NOT:</p>
  <pre class="lang-js prettyprint-override"><code>let i = 0;
  
  $(&quot;.questionBox&quot; + i + &quot; .answerButton&quot;).click(function() {
    $(&quot;.questionBox&quot; + i).hide();
    i++;
    $(&quot;.questionBox&quot; + i).show();
    $(&quot;.answerButton&quot;).hide();
  });
  </code></pre>