How to make the serial number auto generation stable and fixed if the sorting is done in ascending order in some other column in the gridview

Question

I have a list view in my page.I have three columns like serial number,row name,row code.I have did sorting(ascending order) using jquery for the row name.If that sorting is made mean my serial number also changing,yup it obviously change and i need to fix the number stable and default 1,2,3 in my list view if i sort also.Help me out! please help me to fix the serial number fixed, it should continue 1,2,3..so on if i sort also .I have tried some jquery but it was not working in that.How to use the jquery function to fix this issue?

My view :
@model List<BusinessEntities.RoleChangeReasonModel>
    <table class="table table-striped">
        <thead>
            <tr class="table-primary">
                <th></th>
                <th class="w-1">No.</th>
                <th>row name</th>
                <th class="pointer">row code<i class="fa fa-fw fa-sort-up"></i></th>
                <th></th>
                <th>Action</th>

            </tr>
        </thead>
        <tbody>
           @{ int i=1; }
            @foreach (var item in Model)
            {
                     <tr>
                    <td><input type="checkbox" class="Id editable" value="@Html.DisplayFor(modelItem => item.Id)" class="checkBoxRow" name="chkRow" /></td>
                  //serial number autogeneration  <td class="sno">@Html.Raw(i++)</td>
                    <td><input class="Id editable" type="hidden" readonly="readonly" value="@Html.DisplayFor(modelItem => item.Id)" /></td>
                    <td><input class="Reason editable" readonly="readonly" value="@Html.DisplayFor(modelItem => item.rowname)" /></td>
<td><input class="Reason editable" readonly="readonly" value="@Html.DisplayFor(modelItem => item.rowcode)" /></td>
                 </tr>
            }
        </tbody>
    </table>