Extra Webgrid get added on another webgrid sorting In mvc

Question

I am using two webgrid in same view. When I click on second gridview columns, sorting works perfectly, but when I click on first GridView for sorting, clone of second gridview is added after first grid view.

Here is my code:

 <div class="x_content drop-shadow">
        @{
            var grid = new WebGrid(source: Model.MembershipList, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "checkableGrid1", fieldNamePrefix: "g1",pageFieldName: "p1");
            grid.Pager(WebGridPagerModes.All);
            int rowVal = 0;

            @grid.GetHtml(tableStyle: "table table-striped responsive-utilities jambo_table bulk_action", headerStyle: "headings", footerStyle: "webgrid-footer", alternatingRowStyle: "", rowStyle: "", htmlAttributes: new { id = "checkableGrid1" },
    columns: grid.Columns(
    grid.Column("Sr.No.", format: item => rowVal = rowVal + 1),
    grid.Column(columnName: "ShopName", header: "Store Location"),
    grid.Column(columnName: "MembershipTitle", header: "Membership Title"),
    grid.Column(columnName: "MembershipTimeFrame", header: "TimeFrame[Days]"),
    grid.Column(columnName: "MembershipMinVisit", header: "Minimum Visits"),
    grid.Column(header: "Status", format: @<span style="cursor:pointer" id="@item.MembershipID" class="editButton"><u><i class="fa fa-pencil"></i>Edit</u></span>)
))
     }
    </div>

And Second GridView:

 <div class="x_content drop-shadow">
        @{
            var gridReward = new WebGrid(source: Model.RewardList, canPage: true, rowsPerPage: 10, canSort: true, ajaxUpdateContainerId: "checkableGrid2", fieldNamePrefix: "g2",pageFieldName: "p2");
            gridReward.Pager(WebGridPagerModes.All);
            int rowVal1 = 0;

            @gridReward.GetHtml(tableStyle: "table table-striped responsive-utilities jambo_table bulk_action", headerStyle: "headings", footerStyle: "webgrid-footer", alternatingRowStyle: "", rowStyle: "", htmlAttributes: new { id = "checkableGrid1" },
             columns: gridReward.Columns(
             gridReward.Column("Sr.No.", format: item => rowVal1 = rowVal1 + 1),
             gridReward.Column(columnName: "Storename", header: "Store Location"),
             gridReward.Column(columnName: "MembershipTitle", header: "Membership Title"),
             gridReward.Column(columnName: "RewardPoints", header: "HighFive(s) Awarded"),
             gridReward.Column(header: "Status", format: @<span style="cursor:pointer" id="@item.RewardID" class="editButton"><u><i class="fa fa-pencil"></i>Edit</u></span>)
))
            }
        </div>

Here I have attached Snapshot of gridviews: http://prntscr.com/7iejw7 and after sorting first GridView: http://prntscr.com/7iek6s