$(document).ready(function() {
  $('.octopus img').on('click', function(event){
    selected_div = event.target.parentNode;
    rating_value = $(selected_div).children('input').attr('value')
    $('.rated').removeClass('rated')
    $(selected_div).addClass('rated')
    $(selected_div).find('input').prop('checked', true)
    $(selected_div).prevAll('.octopus').addClass('rated')
  })
   $('.octopus img').on('mouseover', function(event){
    selected_div = event.target.parentNode;
    rating_value = $(selected_div).children('input').attr('value')
    $('.rate').removeClass('rate')
    $(selected_div).addClass('rate')
    $(selected_div).prevAll('.octopus').addClass('rate')
  })
  $('.octopus img').on('mouseout', function(event){
  	$('.rate').removeClass('rate')
  })
});
@@ -33,28 +33,24 @@
  $('.octopus
- img
 ').on('click
@@ -61,32 +61,158 @@
 unction(event)%7B%0A
+    if (event.target.nodeName == %22DIV%22)%7B%0A      selected_div = event.target;%0A    %7D else if (event.target.nodeName == %22IMG%22)%7B%0A  
     selected_div
@@ -225,37 +225,46 @@
 nt.target.parent
-Node;
+Element;%0A    %7D
 %0A    rating_valu
@@ -511,17 +511,16 @@
 %0A  %7D)%0A  
- 
 $('.octo
@@ -514,36 +514,32 @@
 %7D)%0A  $('.octopus
- img
 ').on('mouseover
@@ -566,136 +566,206 @@
     
-selected_div = event.target.parentNode;%0A    rating_value = $(selected_div).children('input').attr('value')%0A    $('.rate').remove
+if (event.target.nodeName == %22DIV%22)%7B%0A      selected_div = event.target;%0A    %7D else if (event.target.nodeName == %22IMG%22)%7B%0A      selected_div = event.target.parentElement;%0A    %7D%0A    $(selected_div).add
 Clas
@@ -786,35 +786,58 @@
 $(selected_div).
-add
+nextAll('.octopus').remove
 Class('rate')%0A  
@@ -905,19 +905,14 @@
  $('
-.octopus im
+#ratin
 g').
@@ -949,9 +949,10 @@
 %7B%0A  
-%09
+  
 $('.

modify rating js to make it look better when hovering/clicking on divs and images