Basic variable manipulation of data-* attributes
<p>Imagine the user gets a better discount the higher the data-hipsterness value is and we get this value by asking 4 questions and providing 4 choices for each question. I'm sure it's most basic stuff yet...I need to keep track of a variable every time the user choose one of the options and update it's value so that at the end of the "test" I can do different ifs statements with that result.<br>
What I got so far is a demo <a href="http://lab.polmoneys.com/nohints.html" rel="nofollow">http://lab.polmoneys.com/nohints.html</a> and this code :</p>

<p><strong>EDIT <a href="http://jsfiddle.net/polmoneys/s4xLF/4/" rel="nofollow">http://jsfiddle.net/polmoneys/s4xLF/4/</a></strong></p>

<pre><code>$('h3').click(function(event) {

var value = $(this).data("hipsterness");    
var context =$(this).parent(".cpu");
var counter =$("#counter").text();
var newValue=  counter + value;

$("#counter").text("" + value);
$("#total").val(newValue);

    context.fadeOut("slow", function(e){ 
        context.next(".cpu").fadeIn();

        });
});
</code></pre>

<p><em>thanks</em></p>
