title: How to use star rating (input) field many times in a page
body: <p>I am new to jquery. I want to use this star rating(input) field several times in a page with same ids(as it will come dynamic). Please let me know how i do this.</p>
  
  <p><strong>Jsfiddle: <a href="http://jsfiddle.net/9xrkr/" rel="nofollow">http://jsfiddle.net/9xrkr/</a></strong></p>
  
  <pre><code>&lt;script src="http://www.radioactivethinking.com/rateit/src/jquery.rateit.js"&gt;&lt;/script&gt;
  &lt;input type="range" min="0" max="5" value="0" step="1" id="backing1"&gt;   
  &lt;div class="rateit" id="rateitHover" data-rateit-backingfld="#backing1" data-rateit-step="1" &gt; 
      &lt;span class="tooltip" style="float:right; padding-left:10px;"&gt;&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
  var tooltipvalues = ['Bad', 'Poor', 'Average', 'Good', 'Excellent'];
  var valueToDisplay
  
  $("#rateitHover").bind('over', function (event, value) {
      $('.tooltip').text(tooltipvalues[value - 1]);
  });
  
  $("#rateitHover").bind('reset', function () {
      $('.tooltip').text(''); 
      $('#rateitHover').rateit('value')
  });
  
  $("#rateitHover").bind('rated', function (event, value) {
      $('.tooltip').text('R: ' + tooltipvalues[value - 1]);
  });
  
  $('#rateitHover').bind('mouseleave', function() {
      var v = $('#rateitHover').rateit('value');
      if (v == 0) {
          $('.tooltip').html('');
      } else {
          $('.tooltip').html('R: ' + tooltipvalues[v - 1]);
      }
  });
  
  
  &lt;/script&gt;
  </code></pre>