title: How can I separate my nested functions so they don't interfere with eachother?
body: <p>I have a function that checks the values of some radio buttons/dropdowns against their data values, if they have one, and displays "Correct!" if they match, otherwise displays "Incorrect".</p>
  
  <p>When testing this, if I comment out one half of the portion – i.e., either the part related to the radios or the part related to the dropdowns – the other half works great. However, if they're both running at the same time, the radio buttons always return the "Correct!" paragraph, even when their <code>data</code> and <code>value</code> don't match.</p>
  
  <p>Code is below.</p>
  
  <p>I've tried such things as changing the variable scope and explicitly setting a <code>data</code> value for every radio, but no luck so far.</p>
  
  <p>Thanks in advance!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery('button[name^="handleClick"]').each(function() {
  
      var bt = jQuery(this),
          btId = bt.attr('name').substr(11);
    
      jQuery(bt).click(function() {
      
        var radio = jQuery('input[name="group' + btId + '"]:checked'),
            radioAns = jQuery(radio).attr('data');
        
        if (jQuery(radio).val()==radioAns) {
              document.getElementById('right' + btId).style.display = 'block';
              document.getElementById('wrong' + btId).style.display = 'none';
          } else {
              document.getElementById('right' + btId).style.display = 'none';
              document.getElementById('wrong' + btId).style.display = 'block';
          }
      });
      
      jQuery(bt).click(function() {
        
        var sel = ('#selector' + btId),
            selAns = jQuery(sel).attr('data');
        
          if(jQuery(sel).val()==selAns) {
              document.getElementById('right' + btId).style.display = 'block';
              document.getElementById('wrong' + btId).style.display = 'none';
          } else {
              document.getElementById('right' + btId).style.display = 'none';
              document.getElementById('wrong' + btId).style.display = 'block';
          }
      });
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.selectors, .buttons, .radios {
    float: left;
    margin-right: 25px;
  }
  .rad-group {
    margin: 10px 0 40px 0;
  }
  select {
    margin: 10px 0 40px 20px;
  }
  .buttons p:nth-child(3n+1) {
    margin: 10px 0 48px 0;
  }
  p[id^="wrong"], p[id^="right"] {
    display: none;
  }
  .buttons p[id^="wrong"], .buttons p[id^="right"] {
    margin: -35px 0 15px 0;
  }
  .rad-group p[id^="wrong"], .rad-group p[id^="right"] {
    margin: 10px 0 0 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="radios"&gt;
    &lt;div class="rad-group"&gt;
      &lt;input name="groupBanana" type="radio" value="a" data="a"/&gt;
      &lt;input name="groupBanana" type="radio" value="b" /&gt;
      &lt;input name="groupBanana" type="radio" value="c" /&gt;
      &lt;input name="groupBanana" type="radio" value="d" /&gt;
      &lt;button name="handleClickBanana"&gt;Check Answer&lt;/button&gt;
  
      &lt;p id="rightBanana"&gt;Right! Good job!&lt;/p&gt;
      &lt;p id="wrongBanana"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;/div&gt;
  
      &lt;div class="rad-group"&gt;
        &lt;input name="groupApple" type="radio" value="a"/&gt;
        &lt;input name="groupApple" type="radio" value="b" data="b"/&gt;
        &lt;input name="groupApple" type="radio" value="c"/&gt;
        &lt;input name="groupApple" type="radio" value="d"/&gt;
        &lt;button name="handleClickApple"&gt;Check Answer&lt;/button&gt;
  
        &lt;p id="rightApple"&gt;Right! Good job!&lt;/p&gt;
        &lt;p id="wrongApple"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;/div&gt;
    
    &lt;div class="rad-group"&gt;
      &lt;input name="groupGrapes" type="radio" value="a"/&gt;
      &lt;input name="groupGrapes" type="radio" value="b"/&gt;
      &lt;input name="groupGrapes" type="radio" value="c" data="c"/&gt;
      &lt;input name="groupGrapes" type="radio" value="d"/&gt;
      &lt;button name="handleClickGrapes"&gt;Check Answer&lt;/button&gt;
  
      &lt;p id="rightGrapes"&gt;Right! Good job!&lt;/p&gt;
      &lt;p id="wrongGrapes"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="selectors"&gt;
    &lt;div class="select-container"&gt;&lt;select id="selectorMID1" data="4"&gt;&lt;option selected="selected"&gt;--&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
  
    &lt;div class="select-container"&gt;&lt;select id="selectorMID2" data="3"&gt;&lt;option selected="selected"&gt;--&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
  
    &lt;div class="select-container"&gt;&lt;select id="selectorMID3" data="1"&gt;&lt;option selected="selected"&gt;--&lt;/option&gt;&lt;option value="4"&gt;4&lt;/option&gt;&lt;option value="3"&gt;3&lt;/option&gt;&lt;option value="2"&gt;2&lt;/option&gt;&lt;option value="1"&gt;1&lt;/option&gt;&lt;option value="0"&gt;0&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="buttons"&gt;
    &lt;p&gt;&lt;button name="handleClickMID1"&gt;Check Answer&lt;/button&gt;&lt;/p&gt;
    &lt;p id="wrongMID1"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;p id="rightMID1"&gt;Right! Good Job!&lt;/p&gt;
  
    &lt;p&gt;&lt;button name="handleClickMID2"&gt;Check Answer&lt;/button&gt;&lt;/p&gt;
    &lt;p id="wrongMID2"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;p id="rightMID2"&gt;Right! Good Job!&lt;/p&gt;
  
    &lt;p&gt;&lt;button name="handleClickMID3"&gt;Check Answer&lt;/button&gt;&lt;/p&gt;
    &lt;p id="wrongMID3"&gt;Sorry, incorrect answer.&lt;/p&gt;
    &lt;p id="rightMID3"&gt;Right! Good Job!&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>