jQuery star rating and binding with repeater control

Question

I am binding the star rating jQuery in a repeater control.

The rating value is taken from the database.The issue which I face is,the repeater control displays only the last rating value from database.

I tried by the method given here Turn a number into star rating display using jQuery and CSS

jQuery added to the example:

$(document).ready(function () {
            $('#chk').click(function () {         
                $('input[type=hidden]').each(function () {
                    var hiddenValue = $(this).val();                  
                    document.getElementById('span1').html = hiddenValue;
                    $("#span1").text(hiddenValue);
                });

My design code is:

<asp:repeater id="RepDetails" runat="server">
<HeaderTemplate>
   </HeaderTemplate>
<ItemTemplate>   
Rating:<td align="left">
  <span class="stars" id="span1"></span>
</td>
<asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Eval("Rating") %>' />
 <a id="chk">Click</a>
</td>  
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:repeater>

Code file

protected void Page_Load(object sender, EventArgs e)
{        
        partnerid = "1";
        productid = "2";
        DataSet ds = ServiceObj.GetComments(partnerid, productid);
        RepDetails.DataSource = ds.Tables[0];
        RepDetails.DataBind();
}

Any suggestions to bind the rating for each value from database?

Answer 1

At first look you have one error which can be responsible for your problem:

$("#span1").text(hiddenValue);

If I'm right your jQuery selector will find DOM element with ID, which means that only one element should be found. Thus you have propably only last #span1 found in jQuery. Try change this to another selector for example:

$(".aClass").text(hiddenValue);
$(this).find('input[type="hidden"]').text(hiddenValue);