Star rating row on dynamic Table

I have created a dynamic table of which the row values may change per Session.
In last column I present a 5 star rating scale so that the users rates each displayed row, I get the value but cannot imagine of how I can figure out which row the user has rated each time. The html looks like below:

<table class="table table-striped">
<thead>
    <tr>
    <th scope="col"></th>
    <th scope="col" class="table-warning titlerow featurecol">A</th>
    <th scope="col" class="table-danger titlerow featurecol">B</th>
    <th scope="col" class="table-primary titlerow featurecol">C</th>
    <th scope="col" class="table-success titlerow featurecol">D</th>
    <th scope="col" class="table-light titlerow featurecol">Price<br>euros</th>
    <th scope="col" class="table-active titlerow featurecol">Rating<br> &nbsp;&nbsp;<i class="fas fa-star"></i></th>
    </tr>
</thead>
<tbody>
    {{#each products}}
    <tr>
    <th scope="row"> Product {{ count1 @index}}</th>
    {{#with Product}}
    <td class="featuretablerow"><i class="fas fa-check"></i>{{this.[0]}}</td>
    <td class="featuretablerow" >
        <div><i class="fas fa-check"></i> {{this.[1]}}</div>  
    </td>
    <td class="featuretablerow">
        <div><i class="fas fa-check"></i>{{this.[2]}}</div>    
    </td>
    <td class="featuretablerow">
        <div><i class="fas fa-check"></i> {{this.[3]}}</div>
    </td>
    {{/with}}
    <td class="featuretablerow">{{this.price}}</td>
    <td class="featuretablerow"><p>{{>starsRating mutable=true size='md' class='js-rate-image' id='js-rate-image' }}</p></td>
    </tr>
    {{/each}}
</tbody>
</table>

How can I keep each time apart from the star rating which row has been rated also?

Maybe pass the id/reference of the product to the starsRating component

thanks so much for the reply.
In html the id can be found here

{{this.id}}

but how can I pass it in here

{{>starsRating mutable=true size='md' class='js-rate-image' id='js-rate-image' }}

{{>starsRating mutable=true size='md' class='js-rate-image' id=this.id }}

or {{>starsRating mutable=true size='md' class='js-rate-image' id='js-rate-image' product=this }}

whatever fits you :slight_smile:

thanks once more for the reply I use the following

{{>starsRating mutable=true size='md' class='js-rate-image' id='js-rate-image' product=this }}

and trying to get the product in js:

var starId = $('#js-rate-image').attr('product');

but get undefined have also tried several things but cannot figure it out.

I get the rating star value correctly though through :
var rating = $(event.currentTarget).data("userrating");

How can I get what is in product dynamically each time?

The issue was solved I just had to use

this.product

inside js event handler

1 Like