title: How to hide/show columns from a table?
body: <p>I'm trying to <strong>hide</strong> columns and the corresponding row data for that column. When I click on a particular table header.</p>
  
  <p>But I only end up with hiding the other table headers. I don't even have to click the particular table header for the others to dissapear.</p>
  
  <p><strong>This is what I have for the moment.</strong></p>
  
  <pre><code>&lt;th data-toggle="collapse" data-target="#demo"&gt;totalFillingstops&lt;/th&gt;
  &lt;th id="demo" class="collapse"&gt;fd1&lt;/th&gt;
  &lt;th id="demo" class="collapse"&gt;channel 2&lt;/th&gt;
  &lt;th id="demo" class="collapse"&gt;channel 3&lt;/th&gt;
  &lt;th id="demo" class="collapse"&gt;fd1NoWinding&lt;/th&gt;
  </code></pre>
  
  <p>So when I click the totalFillingStops header I want to collapse/show the following columns fd1, channel 2, ... and so on</p>
  
  <p>This is my <a href="https://jsfiddle.net/80d7rjf5/2/" rel="nofollow">jsfiddle</a>. I'm new to front end programming.</p>