title: Limit change to specific table id
body: <p>I'm trying to do a very simple checkbox input for an html table. I have 3 tables in my page, the problem if I uncheck ".PrenomTCG", it hides all the results (Prenom) in 3 tables.</p>
  
  <p>So, is it possible to assign an id in my jQuery function ? For example "prenomTable"</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>var $ = jQuery;
  // Checkbox
  $(document).ready(function () {
      // Prénom TCG
      $('#prenomEpiques').change(function () {
          if (this.checked) 
              $('.prenomEpique').fadeIn('slow');
          else 
              $('.prenomEpique').fadeOut('slow');
      });
    $('#prenomEpiques').change();    
      // Prénom TCG
      $('#prenomTCG').change(function () {
          if (this.checked) 
              $('.prenomTCG').fadeIn('slow');
          else 
              $('.prenomTCG').fadeOut('slow');
      });
    $('#prenomTCG').change();       
  });</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;label class="checkbox-inline"&gt;
  &lt;input type="checkbox" id="prenomEpiques" class="input_checkbox" checked&gt;When unchecked, I want to hide only rows in the &lt;b&gt;Table 1&lt;/b&gt;.
  &lt;/label&gt;&lt;br/&gt;
  &lt;label class="checkbox-inline"&gt;
  &lt;input type="checkbox" id="prenomTCG" class="input_checkbox" checked&gt;When unchecked, I want to hide only rows in the &lt;b&gt;Table 2&lt;/b&gt;.
  &lt;/label&gt;
  &lt;h1&gt;Table 1&lt;/h1&gt;
  &lt;table id="tableauPrenoms1"&gt;
     &lt;thead&gt;
        &lt;tr id="header"&gt;
           &lt;th&gt;Nom&lt;/th&gt;
           &lt;th&gt;Prénom&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr class="prenomTCG"&gt;
           &lt;td&gt;Jean&lt;/td&gt;
           &lt;td&gt;Pierre&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="prenomEpique"&gt;
           &lt;td&gt;Michel&lt;/td&gt;
           &lt;td&gt;Francis&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;h1&gt;Table 2&lt;/h1&gt;
  &lt;table id="tableauPrenoms2"&gt;
     &lt;thead&gt;
        &lt;tr id="header"&gt;
           &lt;th&gt;Nom&lt;/th&gt;
           &lt;th&gt;Prénom&lt;/th&gt;
        &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tbody&gt;
        &lt;tr class="prenomTCG"&gt;
           &lt;td&gt;Françoise&lt;/td&gt;
           &lt;td&gt;Léa&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr class="prenomEpique"&gt;
           &lt;td&gt;Helene&lt;/td&gt;
           &lt;td&gt;Marie&lt;/td&gt;
        &lt;/tr&gt;
     &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>