how to apply "jQuery Raty" to all rows of a TemplateField ( Item Template ) of Gridview in ASP.NET

Question

I had tried to use "jQuery Raty" to populate stars to all rows of a specific TemplateField ( Item Template ) of Gridview in ASP.NET with following codes, but only the first row of the specific TemplateField ( Item Template ) were populated with 5 stars. Other rows were empty. I will be appreciated if you can tell me How to apply "jQuery Raty" to all rows of a template column of Gridview in ASP.NET. Thanks in advance!

<asp:TemplateField HeaderText="DisplayStarRating">
<ItemTemplate>
<div id="star"></div>
<div id="result"></div>
<script type="text/javascript">
$('#star').raty();
</script>
 </ItemTemplate> 
</asp:TemplateField>

BTW I use following C# codes to bind the GridView with DataSet and above HTML code to append a template column to Display Star Rating with "jQuery Raty" for all rows of the template column.

protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
            GridView1.DataSource = CreateDataSource();
            GridView1.DataBind();
        }
    }