title: Increment value of textbox on button click with different ids
body: <p>This is my code and in it I am using two <code>&lt;textbox&gt;</code> and two <code>&lt;button&gt;</code> tags. The goal is that I want to increment the value in a <code>&lt;textbox&gt;</code> after clicking on its respective buttons:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt; My first increment &lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;input type="text" name="TextBox" id="TextBox1" value="0" /&gt;
      &lt;input type="Button" id='AddButton1' value="+" /&gt;
  
      &lt;input type="text" name="TextBox" id="TextBox2" value="0" /&gt;
      &lt;input type="Button" id='AddButton2' value="+" /&gt;
  
  
      &lt;script src="http://code.jquery.com/jquery-1.4.3.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
              var i = 1;
              $('#AddButton'+i).click( function() {
                  var counter = $('#TextBox'+i).val();
                  counter++ ;
                  $('#TextBox'+i).val(counter);               
              });
              i++;
          });
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>My problem is that I am not able to increment the value in a loop.</p>
  
  <p>For a single <code>&lt;textbox&gt;</code> the inner value is being incremented, but when I use <code>i++</code> the behavior is not repeated.</p>