title: <tbody> not hiding when a dropdown value changed
body: <p>I have a table and want to hide or show some  group of rows when a drop down value  changes. this page is having a master page Here is my dropdown box</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>$(function() {
    $("#ddlIncomeAssement").change(function() {
      var status = this.value;
  
      if (status == "FULLDOCPAYG") {
        $('#FullDocPayg').show();
        $('#FullDocSelf').hide();
        $('#LiteDoc').hide();
        $('#RentalIncome').hide();
      } else if (status == "FULLDOCSELF") {
        $('#FullDocPayg').hide();
        $('#FullDocSelf').show();
        $('#LiteDoc').hide();
        $('#RentalIncome').hide();
      } else if (status == "LITEDOC") {
        $('#FullDocPayg').hide();
        $('#FullDocSelf').show();
        $('#LiteDoc').show();
        $('#RentalIncome').hide();
  
      } else if (status == "RENTALINCOME") {
        $('#RentalIncome').show();
        $('#FullDocPayg').hide();
        $('#FullDocSelf').show();
        $('#LiteDoc').show();
      }
      // alert(status);
    });
  });</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;select id="ddlIncomeAssement"&gt;
    &lt;option value="FULLDOCPAYG"&gt;FULL DOC-PAYG&lt;/option&gt;
    &lt;option value="FULLDOCSELF"&gt;FULL DOC- SELF EMPLOYED&lt;/option&gt;
    &lt;option value="LITEDOC"&gt;LITE DOC&lt;/option&gt;
    &lt;option value="RENTALINCOME"&gt;RENTAL INCOME VERIFICATION AND ASSEMENT&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table&gt;
    &lt;tbody id="FullDocPayg"&gt;
      &lt;tr&gt;
        &lt;td&gt;FullDocPayg&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody id="FullDocSelf"&gt;
      &lt;tr&gt;
        &lt;td&gt;FullDocSelf&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody id="LiteDoc"&gt;
      &lt;tr&gt;
        &lt;td&gt;LiteDoc&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody id="RentalIncome"&gt;
      &lt;tr&gt;
        &lt;td class="light-blue-background text-center" colspan="4"&gt;RENTAL INCOME VERIFICATION AND ASSESSMENT&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="text-left"&gt;
        &lt;td class="text-center"&gt;6.1&lt;/td&gt;
        &lt;td&gt;Confirmation of rental income held using&lt;br /&gt; - Rental statements;&lt;br /&gt; - Lease Agreement;&lt;br /&gt; - 2 x rental estimates (if not currently rented); or&lt;br /&gt; - Valuation Report (if not currently rented)
          &lt;br /&gt; If multiple properties use Rental Calculator and ensure correct allocation to ownership
        &lt;/td&gt;
  
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Not sure why the tbody is not hiding
  Its running in snippet, but not in actual one.  there is a master page . Can that cause an issue for the script to run. While checking  the view source, I cant find the  element</p>
  
  <p>trying <a href="https://stackoverflow.com/questions/53182382/hide-asppanel-based-on-drop-down-value">this method</a> too</p>