title: Id being posted is always the Id from first row of table
body: <p>MVC 5 project. Working with a modal view. The modal has 2 parts. At the top is a dropdownlist with an "add" button. Below that is the main table, with row-delete capability (as described below). How it's supposed to work: If the user click's "add" the entry goes into the table. This works fine. I'm trying to get the row-specific delete functionality working now. Let me describe the issue....</p>
  
  <p>I basically have a table with many items and a delete button for each row. The rows are created as such...</p>
  
  <pre><code>&lt;table class="table table-striped"&gt;
      &lt;tr&gt;
          &lt;th&gt;
             @Html.DisplayNameFor(model =&gt; model.Filter.Filter1)
          &lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      @foreach (var item in Model)
        {
           &lt;tr&gt;
              &lt;td&gt;
                 @Html.DisplayFor(modelItem =&gt; item.Filter.Filter1)
              &lt;/td&gt;
           &lt;td&gt;
           @using (Html.BeginForm("DeleteFromModal", "carColorsFilters", FormMethod.Post))
              {
                  &lt;b&gt;@item.Id&lt;/b&gt;
                  @Html.Hidden("id", item.Id)
                  @Html.Hidden("carColorId", (Int32)ViewBag.carColorId)
                  &lt;input class="btn btn-primary" type="submit" value="Delete" /&gt;
              }
            &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  </code></pre>
  
  <p>My post action is defined as...</p>
  
  <pre><code>        public ActionResult DeleteFromModal(int id, int carColorId)
      {
          carColorsFilter carColorsFilter = db.carColorsFilters.Find(id);
          db.carColorsFilters.Remove(carColorsFilter);
          db.SaveChanges();
  
  
          ViewBag.carColorId = carColorId;
          ViewBag.FilterId = new SelectList(db.Filters, "Id", "Filter1");
          var carColorsfilters = db.carColorsFilters
                  .Where(a =&gt; a.carColorId == carColorId)
                  .Include(a =&gt; a.carColor)
                  .Include(a =&gt; a.Filter);
          return View("_Index", carColorsfilters.ToList());
      }
  </code></pre>
  
  <p>This view is presented as a modal pop up.</p>
  
  <p>When the modal first loads, I double checked the HTML hidden fields for ID (using View Source), and they are all correct. BUT, when I click on the delete button, regardless of the row, the ID of the FIRST row is always passed to the action.</p>
  
  <p>Then, if I immediately check the HTML hidden fields again, ALL of the hidden fields for ID are the EXACT SAME, which is the ID of the ORIGINAL first row (which was deleted in the original delete click), so an error occurs.</p>
  
  <p>Any ideas why this is happening?</p>
  
  <p>Here's the source code for the modal actions...</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
  
  
      $(function () {
          $.ajaxSetup({ cache: false });
  
          $("a[data-modal]").on("click", function (e) {
              // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
              //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');
  
              $('#myModalContent').load(this.href, function () {
                  $('#myModal').modal({
                      /*backdrop: 'static',*/
                      keyboard: true
                  }, 'show');
                  bindForm(this);
              });
              return false;
          });
      });
  
      function bindForm(dialog) {
          $('form', dialog).submit(function () {
              $.ajax({
                  url: this.action,
                  type: this.method,
                  data: $(this).serialize(),
                  success: function (result) {
                      if (result.success) {
                          $('#myModal').modal('hide');
                          $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
                      } else {
                          $('#myModalContent').html(result);
                          bindForm(dialog);
                      }
                  }
              });
              return false;
          });
      }
  &lt;/script&gt;
  </code></pre>