title: MVC3 incrementing a variable in javascript(Jquery)
body: <p>I'm attempting to create a form inside a table that adds a new row every time content is added to the form. Here's my code, and then I'll tell what the problem is.</p>
  
  <pre><code>@{
      //Declare the i variable
      var i = 0;
  }
  
  @using (Html.BeginForm())
  {
      &lt;table&gt;
          &lt;tr&gt;
              &lt;th&gt;
  
              &lt;/th&gt;
              &lt;th&gt;
                  Question
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr id="@(i+1)"&gt;
              &lt;td class="QuestionNum"&gt;
                  @(i+1))
              &lt;/td&gt;
              //This is the cell with the Form field. 
              &lt;td&gt;
                  @Html.TextBoxFor(m =&gt; m.Questions[i].Question, new { @class = "QuestionBox Last" })
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  }
  
  &lt;script&gt;
      $(document).ready(function () {
          SetUpNewLine($('.QuestionBox'));
      });
  
      function SetUpNewLine(obj) {
          obj.bind('keyup paste', function () {
              if ($(this).val() != "") {
                  if ($(this).hasClass("Last")) {
  
                      //This is the line that isn't working.
                      @(i++)
  
                      $(this).parents('table').append('&lt;tr id="@(i+1)"&gt;&lt;td class="QuestionNum"&gt;@(i+1))&lt;/td&gt;&lt;td&gt;@Html.TextBoxFor(m =&gt; m.Questions[i], new { @class = "QuestionBox Last", style="width:100%;" })&lt;/td&gt;&lt;/tr&gt;');
                      $(this).removeClass('Last');
                      SetUpNewLine($('.Last'));
              }
          });
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>So, this code works for the first time, but when calling the <code>@(i++)</code> in the Javascript function, it doesn't save the variable change once you get outside of the function. So after the first Html.TextBoxFor, which is for the first item in the Model.Questions object, it does create a new textbox like I wanted, but instead of incrementing the item it changes in the List, it makes them all just edit the second item in the list. </p>
  
  <p>The odd thing is that if I was to do the <code>@(i++)</code> inside the <code>$(document).ready()</code>, it would work fine.</p>
  
  <p>Any ideas on how I could increment the variable correctly? I'm sure there's just something I don't know when it comes to mixing Razor variables and Javascript.</p>