Add rows to gridview using jquery

initially my gridview is bind with one data and when user click on add more button then i add one row at a time to gridview by jquery. my code is working fine but the problem is when i added 5 rows to gridview from client side by jquery and when i try to iterate in those rows from server side then GridView1.Rows.Count always return one row. so my problem is i am not being able to iterate in rows collection from server side when rows are added from client side by jquery. so here i am giving my whole code and just tell me what i can do as a result i will be able to read all rows from server side after adding those rows by jquery.

ASPX

<script>
     $(document).ready(function () {
        $("#datepicker").datepicker({ 
            dateFormat: 'dd/mm/yy',
            showOn: "both",
            buttonImageOnly: true,
            buttonImage: "images/date_picker.gif",
            buttonText: "Calendar"
         });


        $('#<%=btnAdd.ClientID %>').bind('click', function (event) {
            var $grid = $('#<%=GridView1.ClientID %>');
            var $row = $grid.find('tr:last').clone().appendTo($grid);
            $row.find('select')[0].selectedIndex = 0;
            return false;
        });
    });
</script>

<asp:Button ID="btnAdd" Text="Add More" runat="server" /><br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="False">
       <Columns>
           <asp:TemplateField>
               <ItemTemplate>
                   <asp:DropDownList ID="ddlCountry" runat="server">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem>India</asp:ListItem>
                    <asp:ListItem>UK</asp:ListItem>
                    <asp:ListItem>USA</asp:ListItem>
                    <asp:ListItem>Germany</asp:ListItem>
                </asp:DropDownList>



    <asp:DropDownList ID="ddlCity" runat="server">
                    <asp:ListItem>--Select--</asp:ListItem>
                    <asp:ListItem>Kolkata</asp:ListItem>
                    <asp:ListItem>Mumbai</asp:ListItem>
                    <asp:ListItem>Delhi</asp:ListItem>
                    <asp:ListItem>Madras</asp:ListItem>
                </asp:DropDownList>
               </ItemTemplate>
           </asp:TemplateField>
       </Columns>
   </asp:GridView>
<br /><br />
<asp:Button ID="Button1" Text="Read gridview Value" runat="server" 
    onclick="Button1_Click" /><br />

ServerSide Code

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.Add("ID", typeof(string));
                DataRow dr = dt.NewRow();
                dr["ID"] = "";
                dt.Rows.Add(dr);
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            StringBuilder sb=new StringBuilder();

            //HtmlTable table = (HtmlTable)rpt.Items[0].FindControl("tblSample");

            for (int i = 0; i <= GridView1.Rows.Count - 1; i++)
            {
                string country = ((DropDownList)GridView1.Rows[i].FindControl("ddlCountry")).SelectedItem.Text;
                string city = ((DropDownList)GridView1.Rows[i].FindControl("ddlCity")).SelectedItem.Text;
                sb.Append("Country :- " + country + "  City :- " + city);
            }
            txtData.Text = sb.ToString();
        }