Separate jQuery for Individual Comments?

Question

So far I have designed this function to display rating stars on the front end below every comment:

add_filter( 'comment_text', 'additional_fields' );    
function additional_fields ($below) {
  global $comment;    
if(!get_comment_meta( get_comment_ID(), 'rating', true ) ) {      
$ratsec = '<form action="'.get_permalink().'" method="get" class="comment-form-rating">';    
$ratsec .= '<div id="stars1">
<div class="option starr1">1</div>
<div class="option starr2">2</div>
<div class="option starr3">3</div>
<div class="option starr4">4</div>
<div class="option starr5">5</div>
</div>
<div style="clear:both"></div>';    
    $ratsec .= '<input type="hidden" name="p" value="'.get_the_ID().'"/>';
    $ratsec .= '<input type="text" value="" name="rating['.$comment->comment_ID.']" id="rate22" class="fruit-name"/>';    
    $ratsec .= '<label for="rating">'. __('Rating') . '</label>';    
  $ratsec .= '<input type="submit" value="submit" />';
  $ratsec .= '</form>';
  $below = $below .$ratsec;
  return $below;
}
else
$ratsec = "";
$below = $below .$ratsec;
  return $below;
}

and use this jQuery script:

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    $option.click(function() {
    $fruit.val(this.innerHTML)
    })
});

})(jQuery);
</script>

Now when I am adding a hovering action in it to make star yellow it is yellowing all the star's of all the comments plus when I am click on any star its value is updated to all the fields below comment.

What I want here is make it work individually for every comment? like if I press 2 star for comment id 33 it should only change the color and the value of comment id 33 field. not all the comments.

Answer 1

Replace your jquery with this

<script type="text/javascript">
(function($){

   $(document).ready(function() {
    var $option = $('.option');
    var $fruit = $('.fruit-name');
    var $last;
    var parent
    $option.click(function() {
        parent=$(this).parents('.comment-form-rating');
        $('.fruit-name',parent).val(this.innerHTML)
    })
});

})(jQuery);
</script>

your script not working because .fruit-name not contain correct reference variable.

---

Updated

for debugging put code and check.

<script type="text/javascript">
    (function($){

       $(document).ready(function() {
        var $option = $('.option');
        var $fruit = $('.fruit-name');
        var $last;
        var parent
        $option.click(function() {
         parent1=$(this).parents('.comment-form-rating');
         parent2=$('.option').parents('.comment-form-rating');
         console.log(parent1);
         console.log(parent2);
         $('.fruit-name',parent1).val(this.innerHTML)
        })
    });

    })(jQuery);
    </script>

in above code,after click any .option class parent1 contain only one value because it is referenced(so only change to one .fruit-name class).but parent2 contain as many as your comment(so change to all .fruit-name class)