GridView Load data on Scroll : Repeated Rows Issue

I have created this before with the listview but cannot find my code so i can modify it for the Gridview.  The code works for the 1st 10 records but produces an error for the next recorset.  I reviewed my code and compared it to samples on this site but cannot figure out the issue.  Any help would be great.  Thanks

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="GetPageWise.aspx.vb" Inherits="IVSTech_Benefits_Maintenance_System.GetPageWise" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">





<style type="text/css">

    .Grid td

    {

        background-color: #A1DCF2;

        color: black;

        font-size: 10pt;

        font-family: Arial;

        line-height: 200%;

        cursor: pointer;

        width: 100px;

    }

    .Grid th

    {

        background-color: #3AC0F2;

        color: White;

        font-family: Arial;

        font-size: 10pt;

        line-height: 200%;

        width: 100px;

    }

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>        
    

    <div>

    <table class="Grid" cellspacing="0" rules="all" border="1" id="hdrCustomers" style="width:500px; border-collapse:collapse" >

    <tr>
    
    <th scope="col" style="width:200px" >Customer Name</th>

    <th scope="col" style="width:100px" >City</th>

    <th scope="col" style="width:100px" >Country</th>

    <th scope="col" style="width:100px" >Postal Code</th>
    
    </tr>

    </table>

    <div id="dvGrid" style="height: 200px; overflow: auto; width: 517px">

<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid" Width = "500" ShowHeader="False">

    <Columns>

        <asp:BoundField DataField="ContactName" ItemStyle-Width="200px" />

        <asp:BoundField DataField="City" ItemStyle-Width="100px" />

        <asp:BoundField DataField="Country" ItemStyle-Width="100px" />

        <asp:BoundField DataField="PostalCode" ItemStyle-Width="100px" />

    </Columns>

</asp:GridView>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var pageIndex = 1;
    var pageCount;
    $(function () {
        //Remove the original GridView header
        $("[id$=gvCustomers] tr").eq(0).remove();
    });
    //Load GridView Rows when DIV is scrolled
    $("#dvGrid").on("scroll", function (e) {
        var $o = $(e.currentTarget);
        if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
            GetRecords();
        }
    });
    //Function to make AJAX call to the Web Method
    function GetRecords() {
        pageIndex++;
        if (pageIndex == 2 || pageIndex <= pageCount) {
            //Show Loader
            if ($("[id$=gvCustomers] .loader").length == 0) {
                var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
                row.addClass("loader");
                row.children().remove();
                row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="images/103.gif" /></td>');
                $("[id$=gvCustomers]").append(row);
            }
            $.ajax({
                type: "POST",
                url: "GetPageWise.aspx/GetCustomers",
                data: '{pageIndex: ' + pageIndex + '}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }
    }
    //Function to recieve XML response append rows to GridView
    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
        var customers = xml.find("Customers");
        $("[id$=gvCustomers] .loader").remove();
        customers.each(function () {
            var customer = $(this);
            var row = $("[id$=gvCustomers] tr").eq(0).clone(true);
            $(".name", row).html(customer.find("ContactName").text());
            $(".city", row).html(customer.find("City").text());
            $(".country", row).html(customer.find("Country").text());
            $(".postal", row).html(customer.find("PostalCode").text());
            $("[id$=gvCustomers]").append(row);
        });
        //Hide Loader
        $("#loader").hide();
    }
</script>

</div>

    
    </div>



</asp:Content>