ASP.NET Adding item to repeater is messing up the layout of my page with tabs

Question

I am trying to make a web form that has several dynamic tabs at the top. Under the second tab, there is an "add new" button which can add items to the list using a repeater

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><%@ Register Assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxControlToolkit" %>  

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#Menu1">Menu1</a></li>
      <li><a data-toggle="tab" href="#Menu2">Menu2</a></li>
      <li><a data-toggle="tab" href="#Menu3">Menu3</a></li>

    </ul>

    <div class="tab-content">
      <div id="Menu1" class="tab-pane fade in active">
        <h3>Menu1</h3>
        <p>Content of Menu1 </p>

      </div>  

      <div id="Menu2" class="tab-pane fade">
        <h3>Menu2</h3>
        <p>
                 <asp:Button Text="Add New" ID="btnAdd1" OnClick="btnAdd_Click1" runat="server" />
                <asp:Repeater runat="server" ID="Repeater1">
                    <HeaderTemplate>
                        <div class="container">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Parameter One</th>
                                        <th>Parameter Two</th>
                                        <th>Parameter Three</th>

                                    </tr>
                                </thead>
                                <tbody>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>

                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterOne" Text='<%# Eval("ParameterOne") %>' />
                            </td>
                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterTwo" Text='<%# Eval("ParameterTwo") %>' />
                            </td>
                            <td>
                                <asp:Textbox runat="server" Width="100px" ID="txtParameterThree" Text='<%# Eval("ParameterThree") %>' />
                            </td>

                        </tr>

                    </ItemTemplate>
                </asp:Repeater>
        </p>
      </div>

      <div id="Menu3" class="tab-pane fade">
        <h3>Menu3</h3>
        <p>This content is supposed to be under "Menu3" Tab.</p>
      </div>
    </div>

</div>


</asp:Content>

The code behind for "add new" button

public void btnAdd_Click1(object sender, EventArgs e)
{


    List<FirData> dataList = new List<FirData>();
    //-- add all existing values to a list

    foreach (RepeaterItem item in Repeater1.Items)
    {
        dataList.Add(
                        new FirData()
                        {

                            ParameterOne = (item.FindControl("txtParameterOne") as System.Web.UI.WebControls.TextBox).Text,
                            ParameterTwo = (item.FindControl("txtParameterTwo") as System.Web.UI.WebControls.TextBox).Text,
                            ParameterThree = (item.FindControl("txtParameterThree") as System.Web.UI.WebControls.TextBox).Text,

                        });
    }

    //-- add a blank row to list to show a new row added
    dataList.Add(new FirData());
    Repeater1.DataSource = dataList;
    Repeater1.DataBind();


}

Things works fine without adding any item to the repeater. But once items were added, content under dynamic tabs start to overlap with each other. Please check out the first picture attached below.

This is what would happen after items being added to the page under "Menu2" tab. The part in the red circle is supposed to be showing under the "Menu3" tab instead. Link to the screenshot

If I reload the page and do not click the add new button under the "Menu2" Tab. (Meaning that there is no item under the "Menu2" tab.) Everything would work as expected. The content in the read circle in the previous picture is under the "Menu3" tab now. (which is how it supposed to be)Link to the Screenshot

Thank you!

Answer 1

Below <ItemTemplate> you need to add <FooterTemplate> and include the tbody, table and container div closing tags like this:

</ItemTemplate>
<FooterTemplate>
  </tbody>
  </table>
</div> <!--container div closing -->
</FooterTemplate>