title: How to toggle table in column on button click using jQuery's toggleClass
body: <p>So, I want to be able to toggle a column in a table on a button click. </p>
  
  <p>I looked into jQuery's toggle class function and figured I could give the th (table header) and td (cell in HTML table) the same class and then do a toggleClass on a button click.</p>
  
  <p>Here's my table in my Dashboard.tsx file:</p>
  
  <pre><code>  &lt;table&gt;
    &lt;thead&gt;
    &lt;tr&gt;
    &lt;th class="lastname"&gt;LastName&lt;/th&gt;
    &lt;tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    {
     this.1stUserInfo.map((value, index, array) =&gt; {
       return(
         &lt;tr&gt;
            &lt;td class="lastname"&gt;{value.LastName}&lt;/td&gt;
         &lt;/tr&gt;);
         }, this)
         }
         &lt;/tbody&gt;
         &lt;/table&gt;
  </code></pre>
  
  <p>Here's my button:</p>
  
  <pre><code>       &lt;Button id="lastnamebutton" onClick={(e) =&gt; this.ShowLastName(e,this)}&gt;Toggle Last Name&lt;/Button&gt;  
  </code></pre>
  
  <p>And here's my function in my JavaScript where I implement toggleClass</p>
  
  <pre><code>       public ShowLastName(event, caller) {
            $("#lastnamebutton").toggleClass(".lastname");
         }
  </code></pre>
  
  <p>What am I doing wrong and/or can you think of another way I can toggle a column in my table?</p>