title: I am using jQuery to hide/display values based on specific classes but need help confining the function to specific scopes
body: <p>I am writing a web page to describe how to use index/match formulas in excel. </p>
  
  <p>I am creating a table where you can toggle between an Excel formula and the result. It looks something like this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" class="selectformula"&gt;Show Formulas&lt;/input&gt; | &lt;input type="checkbox" class="selectvalue"&gt;Show Values&lt;/input&gt;
  
  &lt;div class="table-responsive"&gt;
  &lt;table class="table"&gt;
  &lt;tr&gt;&lt;td&gt;Atlas&lt;/td&gt;&lt;td&gt;A&lt;/td&gt;&lt;td&gt;B&lt;/td&gt;&lt;td&gt;C&lt;/td&gt;&lt;td&gt;D&lt;/td&gt;&lt;td&gt;E&lt;/td&gt;&lt;td&gt;F&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;Campaign Name&lt;/td&gt;&lt;td&gt;Publisher Name&lt;/td&gt;&lt;td&gt; Impressions&lt;/td&gt;&lt;td&gt;Clicks&lt;/td&gt;&lt;td&gt;Mapped Impressions&lt;/td&gt;&lt;td&gt;Mapped Clicks&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Campaign A&lt;/td&gt;&lt;td&gt;Publisher A&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;&lt;span class="formula"&gt;=INDEX(DCM!C:C,MATCH(B2,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;90&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;span class="formula"&gt;=INDEX(DCM!D:D,MATCH(B2,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;5&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Campaign A&lt;/td&gt;&lt;td&gt;Publisher B&lt;/td&gt;&lt;td&gt;200&lt;/td&gt;&lt;td&gt;20&lt;/td&gt;&lt;td&gt;&lt;span class="formula"&gt;=INDEX(DCM!C:C,MATCH(B3,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;175&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;span class="formula"&gt;=INDEX(DCM!D:D,MATCH(B3,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;25&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Campaign B&lt;/td&gt;&lt;td&gt;Publisher A&lt;/td&gt;&lt;td&gt;500&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;&lt;span class="red"&gt;&lt;span class="formula"&gt;=INDEX(DCM!C:C,MATCH(B4,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;90&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;td&gt;&lt;span class="red"&gt;&lt;span class="formula"&gt;=INDEX(DCM!D:D,MATCH(B4,DCM!B:B,0))&lt;/span&gt;&lt;span class="value"&gt;5&lt;/span&gt;&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript/JQuery:</p>
  
  <pre><code>$(document).ready(function(){
    $(".value").hide();
    $('.selectformula, .selectvalue').change(function () {
      $('input[type="checkbox"]').not(this).prop("checked", false);
      if($('.selectformula').is(':checked')){
        $('.selectvalue').prop('checked', false);
        $('.formula').show();
        $('.value').hide();
      }
      if ($('.selectvalue').is(':checked')){
        $('.selectformula').prop('checked', false);
        $('.value').show();
        $('.formula').hide();
      }
    });
  });
  </code></pre>
  
  <p>Basically, within a td in my table I have a span for the formula and value. I hide the value initially and display the formula. When the "show value" checkbox is selected, I hide the formula and show the value.</p>
  
  <p>The problem is, I have multiple tables on the same page that use the same classes, so if I select "show values" for one table, all other tables on the page show the value as well which I want to avoid.</p>
  
  <p>Is there a way I can possibly wrap the checkboxes and tables in a div and only influence the results in that particular div even if there are other elements on the page that share the same classes?</p>
  
  <p>Ideally I would want to do something like:</p>
  
  <ol>
  <li>User interacts with div (hovers, maybe?).</li>
  <li>User selects a checkbox within the div.</li>
  <li>Formula/values are toggled in table within that div based on checkbox selected.</li>
  </ol>
  
  <p>I'm thinking I could give each div the same class name, and when it's hovered on and "this".checkbox is changed, I could execute the rest of my code. </p>