ajax - jQuery .append(html) command appending incorrectly -

i using jquery/ajax call append partial view table. when page loads, partial view created correctly. however, once use attempts append item table, formatting incorrect despite exact same partial view being used.

here table. when loads, items loaded onto page correctly picture below illustrates:

     <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> 

once click add another link, jquery/ajax call activiated

<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> 

that jquery calls method 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());     } 

which calls partial view edit(a couple people noticed id tag missing <tr>, copy/paste error post, actual code has id tag)

    @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>     } 

this same partial view called when page first loads, part of why i'm confused end result after hitting add another link turns out looking this

edit

if hit add another link twice, result

edit

i've tried following jquery sucess commands no luck

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

here html rendered after add another link clicked. included opening <form> tag form below show new rows found.

<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">    

edit

here screen shot of table in chrome's debugger after add another link clicked. can see, data pulled table loaded in respective <tr> tags, empty row (which sent via same partial view rest) doesn't have of same table elements. screen shot below shows response, however, include <tr> tags

edit

i put console.log(html) line in success ajax function reads

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

here console output (state edited readability)

<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> 

what complete nightmare...

first off, html being returned viewable in chrome's debugger fine, when clicked on "view source" page, not see loaded. after finding this post, found normal. used this chrome add-on see <tr> , <td> tags being stripped out. adding opening , closing tag append statement, got returned items append table.

    $(".addfixed").click(function () {         $.ajax({             url: '@url.action("blankfixedrow", "banklistmaster")',             datatype: 'html',             cache: false,             success: function (html) {                 $("#fixedrows > tbody").append('<tr>' + html + '</tr>');             }         });     });