What's the best way to get this data to persist within Javascript event handlers using jQuery
<p>My code is meant to replace radio buttons with dynamic ones, and allow clicking both the label and new dynamic radio element to toggle the state of the hidden with CSS radio box.</p>

<p>I need to send to <code>questions.checkAnswer()</code> three parameters, and these are defined within these initiation loops. However I always get last the last values once the loop has finished iterating. In the past I've created dummy elements and other things that didn't feel right to store 'temporary' valuables to act as an informational hook for Javascript.</p>

<p>Here is what I have so far </p>

<pre><code>init: function() {
        // set up handlers

       moduleIndex = $('input[name=module]').val();

       $('#questions-form ul').each(function() {

            questionIndex = $('fieldset').index($(this).parents('fieldset'));

            $('li', this).each(function() {

                answerIndex = $('li', $(this).parent()).index(this);

                prettyRadio = $('&lt;span class="pretty-radio"&gt;' + (answerIndex + 1) + '&lt;/span&gt;');

                radio = $('input[type=radio]', this);

                radio.after(prettyRadio);

                $(radio).bind('change', function() {
                    $('.pretty-radio', $(this).parent().parent()).removeClass('selected');

                    $(this).next('.pretty-radio').addClass('selected');

                    questions.checkAnswer(moduleIndex, questionIndex, answerIndex);

                });

                prettyRadio.bind('click', function() {

                    $('.pretty-radio', $(this).parent().parent()).removeClass('selected');

                    $(this).addClass('selected').prev('input').attr({checked: true});


                });

                $('label', this).bind('click', function() { 


                    $(radio).trigger('change');
                    questions.checkAnswer(moduleIndex, questionIndex, answerIndex);

                    $(this).prev('input').attr({checked: true});

                });



            });


       });
</code></pre>

<ul>
<li>Is it bad to add a pretend attribute with Javascript, example, <code>&lt;li module="1" question="0" answer="6"&gt;</code></li>
<li>Should I store information in the rel attribute and concatenate it with an hyphen for example, and explode it when I need it?</li>
<li>How have you solved this problem?</li>
<li>I am open to any ideas to make my Javascript code better.</li>
</ul>

<p>Thank you all for your time.</p>
