title: Toggle select table columns on/off by using radio buttons (off by default)
body: <p>I have a basic table that should show first name and last name columns only when loaded. The user can toggle the radio buttons to show <strong>one</strong> extra column at a time. The issue is that the toggling is not working correctly and the user can see multiple extra columns at once. Also, when the table loads, the extra columns aren't hidden. I have this working for checkboxes but when I adjusted for radio buttons it caused these issues.</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>$('input[type="radio"]').each(function() {
      var inputValue = "table ." + $(this).attr("name");
      $(inputValue).hide();
  });
      
      
  $('input[type="radio"]').click(function(){
      var inputValue = "table ." + $(this).attr("value");
      $(inputValue).toggle();
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;p&gt;Select a column to show. You can only show one extra column from the options below at a time.&lt;/p&gt;
  &lt;input type="radio" name="extraCol" id="age" value="age"&gt;
  &lt;label for="age"&gt;Age&lt;/label&gt;
  &lt;input type="radio" name="extraCol" id="gender" value="gender"&gt;
  &lt;label for="gender"&gt;Gender&lt;/label&gt;
  &lt;input type="radio" name="extraCol" id="hometown" value="hometown"&gt;
  &lt;label for="hometown"&gt;Hometown&lt;/label&gt;
  &lt;input type="radio" name="extraCol" id="off" value="off" checked&gt;
  &lt;label for="off"&gt;Don't show&lt;/label&gt;;
        
   &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;First name&lt;/th&gt;
      &lt;th&gt;Last name&lt;/th&gt;
      &lt;th class="age"&gt;Age&lt;/th&gt;
      &lt;th class="gender"&gt;Gender&lt;/th&gt;
      &lt;th class="hometown"&gt;Hometown&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Jill&lt;/td&gt;
      &lt;td&gt;Smith&lt;/td&gt;
      &lt;td class="age"&gt;50&lt;/td&gt;
      &lt;td class="gender"&gt;Female&lt;/td&gt;
      &lt;td class="hometown"&gt;Springfield&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;Eve&lt;/td&gt;
      &lt;td&gt;Jackson&lt;/td&gt;
      &lt;td class="age"&gt;94&lt;/td&gt;
      &lt;td class="gender"&gt;Female&lt;/td&gt;
      &lt;td class="hometown"&gt;South Park&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt; </code></pre>
  </div>
  </div>
  </p>