ASP .NET RowDataBound attribute working for only one row (first one)

I want to blink selected rows in gridview. I'm using a jquery and binding it to ID attribute under RowDataBound method.

But only one row (first one) is blinking, even if there are multiple rows set to blink.

Here is the HTML body

    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager" runat="server" />
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <fieldset>
                        <div>
                            <asp:GridView  ID="GrdScreen1" runat="server" OnRowDataBound="GrdTaskDetail_RowDataBound" AutoGenerateColumns="false">
                                <Columns>
                                    <asp:TemplateField HeaderText="Shift">
                                        <ItemTemplate>
                                            <asp:Label ID="testblinklbl" runat="server" Text='<%# Eval("Shift") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="TaskName">
                                        <ItemTemplate>
                                            <asp:Label ID="testemplbl" runat="server" Text='<%# Eval("TaskName") %>'></asp:Label>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="IsBlinkON">
                                        <ItemTemplate>
                                            <asp:Label ID="testblklbl" runat="server" Text='<%# Eval("ToBlink") %>'></asp:Label>
                                            <asp:HiddenField ID="hddblink" runat="server" Value='<%#Eval("ToBlink")%>' />  
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </div>
                    </fieldset>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        </form>
    </body>

Here is the script

<script type="text/javascript">
    $(function() {
        blinkeffect('#txtblnk');
      })
   
  function blinkeffect(selector) {
      $(selector).fadeOut('slow', function() {
          $(this).fadeIn('slow', function() {
            blinkeffect(this);
          });
        });
      }
 </script>

Here is my Rowdatabound and on page load code -

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt = Heatcon.GetAuxcabOpDashboardScreen1("Station 1");

            if (dt.Rows.Count > 0)
            {
                GrdScreen1.DataSource = dt;
                GrdScreen1.DataBind();
            }
        }
    }

    protected void GrdTaskDetail_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            HiddenField BlinkTask = (e.Row.FindControl("hddblink") as HiddenField);

            if (BlinkTask.Value.ToString() == "1")
            {
                e.Row.Attributes.Add("id", "txtblnk");
            }
        }
    }

This is working but only for one row (first one). I tried debugging to see if blinkvalue for other rows is getting set to "1" and it is.

Please let me know if there is something I'm missing? not sure if issue with asp gridview or jquery. Thanks in advance!

I can provide additional details if required.

Solution

Your code is not working because you are using same "id" attribute value for more than one control. "id" value is unique for each control in page.

In order to make this work you will have to use "class" attribute. Try following changes.

<script type="text/javascript">
    $(function() {
        blinkeffect('.clstxtblnk');
      })
   
  function blinkeffect(selector) {
      $(selector).fadeOut('slow', function() {
          $(this).fadeIn('slow', function() {
            blinkeffect(this);
          });
        });
      }
</script>

Make changes to RowDataBound method to add "class" attribute instead of "id" attribute.

protected void GrdTaskDetail_RowDataBound(object sender, GridViewRowEventArgs e)
{

    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HiddenField BlinkTask = (e.Row.FindControl("hddblink") as HiddenField);

        if (BlinkTask.Value.ToString() == "1")
        {
            e.Row.Attributes.Add("class", "clstxtblnk");
        }
    }
}