title: JQuery hide not working after adding class to element
body: <p>I am currently developing a php app using Ajax, JQuery. And I encountered issues using JQuery for displaying my content.</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table class="table table-hover table-dark" id="table_beam"&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I can either hide my table by using</p>
  
  <pre><code>$('#table_beam').hide();
  </code></pre>
  
  <p>or I can hide the whole div by using</p>
  
  <pre><code>$('.table-responsive').hide();
  </code></pre>
  
  <p>But once I add couple classes to my table as follow:</p>
  
  <pre><code>&lt;div class="table-responsive top tg"&gt;
      &lt;table class="table table-responsive w-100 d-block d-md-table table-hover table-dark" id="table_beam"&gt;&lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I cannot hide anymore using id element with</p>
  
  <pre><code>$('#table_beam').hide();
  </code></pre>