Getting radio button values for multiple radio button sets
<p>I'm setting up a multiple choice questionnaire with the responses being handling by radio buttons labelled A, B, C and D.</p>

<p>I want to identify the answer to each question by getting the form ID and the clicked button value, so that, for example, a response  using the first set of radio buttons might be 1B and the second, 2D and so on (the form ID script is already up and running).</p>

<p>I need this to work on a page with multiple sets of radio buttons</p>

<p>Here is the HTML: </p>

<pre><code>    &lt;form class="toeic_pages" id="1"&gt;
      &lt;label class="item1"&gt;
        &lt;input type="radio" value="A" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item2"&gt;
        &lt;input type="radio" value="B" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item3"&gt;
        &lt;input type="radio" value="C" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item4"&gt;
        &lt;input type="radio" value="D" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;  
    &lt;/form&gt;
    ...                                                                
    &lt;form class="toeic_pages" id="2"&gt;
      &lt;label class="item1"&gt;
        &lt;input type="radio" value="A" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item2"&gt;
        &lt;input type="radio" value="B" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item3"&gt;
        &lt;input type="radio" value="C" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;
      &lt;label class="item4"&gt;
        &lt;input type="radio" value="D" name="toeic"/&gt;
        &lt;div class="radio-image"&gt;&lt;/div&gt;
      &lt;/label&gt;  
    &lt;/form&gt;
</code></pre>

<p>However, while I've been able to get a checked radio button value using this:</p>

<pre><code>    jQuery('input[name=toeic]').change(function(){
      var invar = jQuery('input[name=toeic]:checked').val();
      alert(invar);
    });
</code></pre>

<p>The script is only effective within the first row of buttons clicked. </p>

<p>To illustrate, if in the first row of buttons to be accessed, button B is clicked then B is displayed  (correct).</p>

<p>But, if in another row,  button C clicked, B is displayed (incorrect) .. and B continues to be displayed for all subsequent button clicks. I've checked out the SO pages on this but I haven't been able to find a solution - the issue seems to be <strong>multiple sets</strong> of radio buttons. </p>

<p>Any help would be very much appreciated</p>