Update Rating total as a % using jQuery
<p>Ok we are making a rating script, in fact it all works.</p>

<p>The code is split across 20 ratings, that we require users to rate. They have each 10 values.</p>

<p>Code like so:</p>

<pre><code>&lt;div class="ctrlHolder"&gt;
&lt;p class="label"&gt;Housing Affordability&lt;/p&gt;
&lt;div class="multiField starify" id="question-1"&gt;
    &lt;label for="vote-1_1" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_1" data-cost="0" value="Very Poor" /&gt; Very Poor&lt;/label&gt;
    &lt;label for="vote-1_2" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_2" data-cost="1.0" value="Poor" /&gt; Poor&lt;/label&gt;
    &lt;label for="vote-1_3" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_3" data-cost="1.5" value="Not that Bad" /&gt; Not that Bad&lt;/label&gt;
    &lt;label for="vote-1_4" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_4" data-cost="2.0" value="Fair" /&gt; Fair&lt;/label&gt;
    &lt;label for="vote-1_5" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_5" data-cost="2.5" value="Average" /&gt; Average&lt;/label&gt;
    &lt;label for="vote-1_6" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_6" data-cost="3.0" value="Almost" /&gt; Almost&lt;/label&gt;
    &lt;label for="vote-1_7" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_7" data-cost="3.5" value="Good" /&gt; Good&lt;/label&gt;
    &lt;label for="vote-1_8" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_8" data-cost="4.0" value="Very Good" /&gt; Very Good&lt;/label&gt;
    &lt;label for="vote-1_9" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_9" data-cost="4.5" value="Excellent" /&gt; Excellent&lt;/label&gt;
    &lt;label for="vote-1_10" class="blockLabel"&gt;&lt;input type="radio" name="poll-1" id="vote-1_10" data-cost="5.0" value="Perfect" /&gt; Perfect&lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p></p>

<p>ABove shows 1 question. Or sorry one Rating, which appears like this:</p>

<p><img src="http://i.stack.imgur.com/7DvBs.png" alt="enter image description here"></p>

<p>Now the user selects the amount of stars they think that QUESTION affords, so in this example the user has selected 8 stars , for Housing Affordability.</p>

<p>This is appended a data-cost of 4.0</p>

<p>Because we have 20 questions, the maths is like so:</p>

<p>20 questions = 100% max score rating. ( if users 10 stars everything. )</p>

<p>Thus each question is worth 5% of total score, and because there are 10 stars in each rating, each star has a individual value of .5%</p>

<p>So in this case, above 8 star rating = 4%</p>

<p>What I want to achieve, is...</p>

<p>As the user goes thru the questions we have a FIXED div, which updates the current rating %</p>

<p>Like so:</p>

<p><img src="http://i.stack.imgur.com/8DAHi.png" alt="enter image description here"></p>

<p>What I need is some help doing the jQuery.</p>

<p>I need to echo the current selection from question 1, into the Your Rating: element.</p>

<p>And update it as we go, so if user rates next item 8 stars , the rating shows 8%
and updates on page as they go thru the ratings.</p>

<p>To keep it tidy, I have split the rating page into 4, and we paginate across the rating pages, 1 to 4 using back and next.</p>

<p>Obviously we need to add validation as we go, but wondered if anyone knows method to do what I want to achieve...</p>

<p>I had read about (prop) method, but I am getting confused.</p>

<p>Any help appreciated, please.</p>

<p>To CLARIFY:</p>

<p>data-cost isnt used anywhere else, it is just something I have added to do the math as we go</p>

<p>UPDATE:</p>

<p>DEMO setup. <a href="http://sitehelp.com.au/demos/starrating/demo7c.html" rel="nofollow">http://sitehelp.com.au/demos/starrating/demo7c.html</a></p>

<p>Issue seems to be each rating is cloaked into a sibling div.</p>
