JQuery.append (html) command incorrectly added

I am using jQuery / Ajax call to add a partial view to a table. When the page loads, a partial view is created correctly. However, as soon as use tries to add another element to the table, the formatting is incorrect, even though the same partial view is used.

Here is a table. When this loads, the elements load correctly on the page, as shown in the image below:

     <table id="fixedRows">
     <thead>
        <tr>
           <th>State Code</th>
           <th>Agent ID</th>
           <th></th>
           <th></th>
        </tr>
    </thead>
    <tbody>    
    @foreach (var item in Model.BankListAgentId)
    {                    
        if (!String.IsNullOrWhiteSpace(item.AgentId) && item.FixedOrVariable.Equals("F"))
        {
            @Html.EditorFor(model => item, "FixedPartialView")                     
        }
    }
</tbody>
</table>
<br />
<a href="#" class="addFixed">Add Another</a>

As soon as you click the link Add another, this jQuery / Ajax call is activated

<script type="text/javascript">
    $(document).ready(function () {

        $(".addFixed").click(function () {
            //alert('test');
            event.preventDefault();        
            $.ajax({
                url: '@Url.Action("BlankFixedRow", "BankListMaster")',
                cache: false,
                success: function (html) { $("#fixedRows").append(html); }
            });
        });

        $("#addVariable").click(function () {
            event.preventDefault();
            $.ajax({
                url: '@Url.Action("BlankFixedRow", "BankListMaster")',
                cache: false,
                success: function (html) { $("#variableRows").append(html); }
            });
        });

    });


</script>

This jQuery calls this method from the controller

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

What causes this partial view of EDIT (a couple of people noticed that the tag is idmissing in <tr>, it was just a copy / paste error for this message, the actual code has the tag id)

    @model Monet.Models.BankListAgentId

@{
    Layout = null;
}
    @using (Html.BeginCollectionItem("BankListAgentId"))
    {
        <tr id="item-@Model.AgentId">
            <td>
                @Html.DropDownListFor(model => model.StateCode,
                    (SelectList)ViewBag.StateCodeList, Model.StateCode)
            </td>
            <td>
                @Html.EditorFor(model => model.AgentId)
                @Html.ValidationMessageFor(model => model.AgentId)
            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>
            @*<td><a href="#" onclick="$('#item-@Model.AgentId').parent().remove();" style="float:right;">Delete</a></td>*@
        </tr>
    }

, , - , Add another :

Add another,

jQuery sucess

success: function (html) { $("#fixedRows > tbody:last").append(html); }
success: function (html) { $("#fixedRows tr:last").after(html); }
success: function (html) { $("#fixedRows  > tbody").append(html); }

HTML, Add another. <form> , , .

<form action="/BankListMaster/Edit/11" method="post">        
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table id="fixedRows">
            <tr>
                <th>State Code</th>
                <th>Agent ID</th>
                <th></th>
                <th></th>
            </tr>

            <tr id="item-1164998320">
                <td>
                    <select id="item_StateCode" name="item.StateCode"><option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998320" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>    
            <tr id="item-1164998219">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">HI</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="1164998219" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>    
            <tr id="item-0352926603">
                <td>
                    <select id="item_StateCode" name="item.StateCode">
                        <option value="">GA</option>
                        <option>AL</option>
                        ..
                        <option>WY</option>
                    </select>
                </td>
                <td>
                    <input class="text-box single-line" id="item_AgentId" name="item.AgentId" type="text" value="0352926603" />
                    <span class="field-validation-valid" data-valmsg-for="item.AgentId" data-valmsg-replace="true"></span>
                </td>
                <td>
                    <a href="#" class="deleteRow">delete</a>
                </td>
            </tr>            
        </table>
        <br />
        <a href="#" class="addFixed">Add Another</a>
    </fieldset>
</form>     
<a href="#" class="addFixed">Add Another</a>
<form action="/BankListMaster/Edit/11" method="post">   

Chrome Add another. , , , <tr>, ( , ) . , , <tr>

console.log(html) success Ajax,

            success: function (html) {
                console.log(html);
                $("#fixedRows > tbody").append(html);
            }

( )

<input type="hidden" name="BankListAgentId.index" autocomplete="off" value="3f7e0a92-8f20-4350-a188-0725919f9558" />
        <tr>
            <td>
                <select id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__StateCode" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].StateCode">
                    <option>AL</option>
                    ..
                    <option>WY</option>
                </select>
            </td>
            <td>
                <input class="text-box single-line" id="BankListAgentId_3f7e0a92-8f20-4350-a188-0725919f9558__AgentId" name="BankListAgentId[3f7e0a92-8f20-4350-a188-0725919f9558].AgentId" type="text" value="" />                 
            </td>
            <td>
                <a href="javascript:void(0)" class="deleteRow">delete</a>
            </td>               
        </tr>