title: Jquery - Setting text inside the closest span class after checking radio
body: <p>I'm trying to add the value a user has checked from a radio and have it displayed in a span with the class 'user-set' with the corresponding header. The problem is when it displays the value, it displays it on all the headers with the span classes that have 'user-set'.</p>
  
  <p>Here's an example: <a href="http://jsfiddle.net/fPWY3/" rel="nofollow">http://jsfiddle.net/fPWY3/</a></p>
  
  <pre><code>&lt;div class='accordion'&gt;
    &lt;div class='heading'&gt;
       &lt;img src=''&gt; heading &lt;span class='f12'&gt;info&lt;/span&gt; &lt;span class='user-set'&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class='items'&gt;
       &lt;input type='radio' class='next' name='theName' id='theName1'&gt;&lt;label for='theName1'&gt;thisIsMyValue 1&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class='items'&gt;
       &lt;input type='radio' class='next' name='theName' id='theName2'&gt;&lt;label for='theName2'&gt;thisIsMyValue 2&lt;/label&gt;
    &lt;/div&gt;
  
    &lt;div class='heading'&gt;
       &lt;img src=''&gt; heading 2&lt;span class='f12'&gt;info&lt;/span&gt; &lt;span class='user-set'&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class='items'&gt;
       &lt;input type='radio' class='next' name='theName2' id='theName3'&gt;&lt;label for='theName3'&gt;thisIsMyValue 3&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class='items'&gt;
       &lt;input type='radio' class='next' name='theName2' id='theName4'&gt;&lt;label for='theName4'&gt;thisIsMyValue 4&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I do it so if I click on 'thisIsMyValue 3', the value will be displayed on the span with the class user-set from heading 2 only?</p>