Hello Again Everyone,

I am attempting to use this plugin jQuery Star Rating Plugin 3.14 Test #4. I have manage to successfully display the stars for voting on my page, but what i would now like to do is display each star-rating (ex. comment 1 vote : 3.5, comment 2 vote: 4, comment 3 vote: 1.5) and star-rating average (ex. total vote average: 3.8 ) from all three star-ratings.

The plugin has a submit button that displays each star-rating however I want it to display simultaneously after each star-rating along with an average for each star rating without the need to click the submit button...

I have been working all this problem for a little over a day now so any suggestions or help of any kind I thank you.


HTML code:

Code:
<section>
	<article id="comment">
	   <form id="form4">
	      <input class="star {split:2}" type="radio" name="test-1-rating-3" value="star1"  title="Worst"/>
	      <input class="star {split:2}" type="radio" name="test-1-rating-3" value="star2"  title="Worst"/>
    		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star3"  title="Bad"/>
    		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star4"  title="Bad"/>
		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star5"  title="OK"/>
   		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star6"  title="OK"/>
    	        <input class="star {split:2}" type="radio" name="test-1-rating-3" value="star7"  title="Good"/>
    		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star8"  title="Good"/>
		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star9"  title="Best"/>
   		<input class="star {split:2}" type="radio" name="test-1-rating-3" value="star10"  title="Best"/>
   	</form>
   				 
   	<time datetime="2011-16-11T23:31:45+01:00"> December 16, 2011 </time>
   	<br><br>
   				 
	<h3>Best restaurant ever!</h3>
	<p class="comment">Food is amazing, staff is very friendly.</p>
	<span class="dash">-</span> <a class="qa" href="#">qa</a> 
			    </article>
			</section>
			
         <section>
		 <article id="comment">
		 <form id="form4">
		      <input class="star {split:2}" type="radio" name="test-2-rating-3" value="star1"  title="Worst"/>
		     <input class="star {split:2}" type="radio" name="test-2-rating-3" value="star2"  title="Worst"/>
    		   <input class="star {split:2}" type="radio" name="test-2-rating-3" value="star3"  title="Bad"/>
    		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star4"  title="Bad"/>
		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star5"  title="OK"/>
   		 <input class="star {split:2}" type="radio" name="test-2-rating-3" value="star6"  title="OK"/>
    		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star7"  title="Good"/>
    		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star8"  title="Good"/>
		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star9"  title="Best"/>
   		<input class="star {split:2}" type="radio" name="test-2-rating-3" value="star10"  title="Best"/>
   	</form>
   				 
   		<time datetime="2012-15-11T23:31:45+01:00"> December 15, 2011 </time>
   		<br><br>
   				 
		     <h3>Pretty good food</h3>
		         <p class="comment">Nice atmosphere</p>
			<span class="dash">-</span> <a class="qa" href="#">qa</a>
			    </article>
			</section>
			
		<section>
		<article id="comment">
	        <form id="form4">
			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star1"  title="Worst"/>
		         <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star2"  title="Worst"/>
    			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star3"  title="Bad"/>
    			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star4"  title="Bad"/>
			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star5"  title="OK"/>
   			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star6"  title="OK"/>
    			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star7"  title="Good"/>
    			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star8"  title="Good"/>
			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star9"  title="Best"/>
   			 <input class="star {split:2}" type="radio" name="test-3-rating-3" value="star10"  title="Best"/>
   		</form>
   		 
   		 <time datetime="2011-14-11T23:31:45+01:00"> December 14, 2011 </time>
   				 <br><br>

			    <h3>Don't go here</h3>
				<p class="comment">They put sardines in the pasta!</p>
				<span class="dash">-</span> <a class="qa" href="#">qa</a>
			    </article>
			</section>



<!-- area to be populated with resolutes -->

<div id="mainContent"> <!-- mainContent begin-->
		<h2 class="left">3 Customer Reviews</h2>
		
   <input type="submit" value="Submit scores!" />  </td>
  
   <u>Test results</u>:<br/><br/>
   <div class="test Smaller">
    <span style="color:#FF0000">Results will be displayed here</span>
   </div>
  </td>		
 </div>
jQuery Script (not working):
Code:

$(function(){
  $('.test',this).html('');
  $('input',this).each(function(){
   if(this.checked) $('.test',#form4).append(''+this.name+': '+this.value+'<br/>');
		});
});