javascript - Using Jquery Raty in Rails 4 and showing average of star rating -

i have rails app in using jquery raty plugin have included raty in gemfile

gem 'jquery-raty-rails', github: 'bmc/jquery-raty-rails' 

and in application.js have included

//= require jquery.raty //= require jquery.raty.min 

and have included in javascript

  $('#star-log').raty({     target     : '#hint-log',     targettype : 'score',     targetkeep : true }); $('#star-comm').raty({     target     : '#hint-comm',     targettype : 'score',     targetkeep : true }); $('#star-tech').raty({     target     : '#hint-tech',     targettype : 'score',     targetkeep : true  }); $('#star-overall').raty({     target     : '#hint-overall',     targettype : 'score',     targetkeep : true,     readonly   : true }); 

the view stars rating given as

<div class="row">             <div class=" col s12 m6 logical">               <label>logical & analytical skills</label>               <div id="star-log" > </div>               <%= f.text_field :log_skill, :id=>'hint-log' %>              </div>             <div class=" col s12 m6">               <label>communication skills</label>               <div id="star-comm" ></div>               <%= f.text_field :comm_skill, :id=>'hint-comm' %>             </div>           </div>                 <div class="row">                   <div class=" col s12 m6">                     <label>technical skills</label>                     <div id="star-tech" id="star-tech"></div>                     <%= f.text_field :log_skill, :id=>'hint-tech' %>                   </div>                   <div class="col s12 m6">                     <label >overall rating</label>                     <div id="star-overall" id="star-read"></div>                     <%= f.text_field :log_skill, :id=>'hint-overall' %>                   </div>                 </div> 

i have 4 fields star rating given as

1. logical & analytical skills
2. communication skills
3. technical skills
4. overall skill

so in first 3 star rate user rate , ratings overall skill(which read only) updated while rating or can overall skill rating average of first 3 skills , automatically being updated , keep showing stars how can ?

add class stars group 3 of star ratings

<div class="row">   <div class=" col s12 m6 logical">     <label>logical & analytical skills</label>     <div id="star-log" class="stars" > </div>     <%= f.text_field :log_skill, :id=>'hint-log' %>   </div>    <div class=" col s12 m6">     <label>communication skills</label>     <div id="star-comm" class="stars" ></div>     <%= f.text_field :comm_skill, :id=>'hint-comm' %>   </div> </div> <div class="row">   <div class=" col s12 m6">     <label>technical skills</label>     <div id="star-tech" class="stars"></div>     <%= f.text_field :log_skill, :id=>'hint-tech' %>   </div>   <div class="col s12 m6">     <label >overall rating</label>     <div id="star-overall"></div>     <%= f.text_field :log_skill, :id=>'hint-overall' %>   </div> </div> 

removed double id given last star ratings (star tech , overvall)

$('#star-log').raty({     target     : '#hint-log',     targettype : 'score',     targetkeep : true });  $('#star-comm').raty({     target     : '#hint-comm',     targettype : 'score',     targetkeep : true });  $('#star-tech').raty({     target     : '#hint-tech',     targettype : 'score',     targetkeep : true  });  $('#star-overall').raty({     target     : '#hint-overall',     targettype : 'score',     targetkeep : true,     readonly   : true });  $(document).on("click", ".stars", function(){   var score = 0 ;    //loop through stars score   $('.stars').each(function(i, obj) {     //if score there undefined if star not selected     if ($(obj).raty('score'))        score +=  $(obj).raty('score');    });  //calculating average  score = score / $(".stars").length;  $('#star-overall').raty({score:  score });  $("#hint-overall").val(score.tofixed(2)); });