ASP.NET MVC Partial view not loading within same view page

In my View I have to put several render partial pages to dynamically add rows in a table (eg. product line in an invoice)

To add the first table I have followed: http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/

I have followed the instructions in the link but my main view looks like this:

<table id="editorRows" style="width: 100%;">
  <tr>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
  </tr>

  @foreach (var item in Model.Entity.ListPlans)
  {
  Html.RenderPartial("PlanEditorRow", item);
  }

</table> 
<b><i>@Html.ActionLink("Add another plan...", "BlankPlanEditorRow", null, new { id = "addItem" })</i></b>

The partial view (PlanEditorRow) is:

@model Project.Models.Plan
@using Project.Helpers

<tr class="editorRow">
@using (Html.BeginCollectionItem("assignedPlans"))
{

    <td>
        @Html.EditorFor(x => x.Data1)
    </td>
    <td>
        @Html.EditorFor(x => x.Data2)
    </td>

    <td>
        @Html.EditorFor(x => x.Data3)
    </td>
    <td>
        <a href="#" class="deleteRow">delete</a>
    </td>
}
</tr>

I use the same javascript as in the link above. When clicking the add plan link, the plans editor rows in the table are correctly added dynamically on the same main view within the form.

But when I add a similar second table for eg. products with changed renderpartial configurations and click on add link the editor row is loaded on a new page (ie. partial view only, the main view is gone). I use the same ID and classes from the first table and same JS.

I guess the HTML element ID can't be the same, if so how can I solve it?

How can I make sure any number of similar tables in the form, function correctly as with first table in terms of dynamic row addition?

@Chris Pratt, I have already used this:

$("#addItem").click(function () {
$.ajax({
    url: this.href,
    cache: false,
    success: function (html) { $("#editorRows").append(html); }
});
return false;
});

$("a.deleteRow").live("click", function () {
$(this).parents("tr.editorRow:first").remove();
return false;
});

Not sure if this what you mean with adding html via AJAX when requesting partial?