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)