Using AJAX.BeginForm inside a table row places the to be updated outside of the table

Question

I am using AJAX.BeginForm to make changes to table rows (specifically, a row contains a div that is updated, and the div contains the row data). But the insertion of the <div> is made outside (just above) the actual table in the resulting HTML. Any idea? Thanks!

The table body is constructed with a forloop that produces a new table row, which in turn contains an AJAX.BeginForm helper. The helper wraps around a form, and a div to be replaced, and table row contents (just <td>s). Each table row uses its own model, and each model has a unique resourceID that is used to give the div an identifier so that it may be updated.

When a value of a dropdown in a table row is changed, a function submitExistingSettingForm is called, and that function in turn submits the AJAX.BeginForm helper for the changed row.

<script>
function SubmitExistingSettingForm(resourceIdentifier) {
    var formName = resourceIdentifier + "Form";
    console.log("SubmitAddSettingTriggered with form id " + formName);
    var form = $('form[name=' + formName + ']');
    $("#" + formName).submit();
    $.validator.unobtrusive.parse("#" + formName);
} 
</script>

        <table class="table table-hover table-fixedlayout table-bordered shadow">
        <colgroup>
            <col width="1" />
            <col width="2" />
        </colgroup>
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2", AJAX_LOADER_SHOW, AJAX_LOADER_HIDE)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (Model subModel in Model.subModels)
            {
            <tr class="result-row break-word">
                @using (Ajax.BeginForm("Report", "ReportController", null, new AjaxOptions
                {
                    HttpMethod = "POST",
                    OnSuccess = "SuccessMessage",
                    OnFailure = "FailMessage",
                    UpdateTargetId = @report.ResourceId,
                    InsertionMode = InsertionMode.Replace
                }, new { id = reportSetting.ResourceId + "Form" }))
                {
                <form>
                    <div id=@report.ResourceId>

                        @Html.Action("SingleReport", report)

                    </div>
                </form>
                }
            </tr>

            }
     </table>

The SingleReport page:

    @{ object areaDropDownAttributes = new { @class = "form-control" };
}

    @Html.HiddenFor(m => m.ResourceId)

    <td>
    <input type="submit" class="btn btn-danger btn" value="X" />
</td>

    <td>
    @Html.DropDownListFor(m => m.ReportSetting1, Model.AvailableReportSettings.ReportSetting1s, new
       {
           @id = "ReportSetting1Id",
           @class = "form-control",
           @onchange = "SubmitExistingSettingForm('" + @Model.ResourceId + "')"
       })
</td>