title: Attempting to hide a column of a html table using jQuery
body: <pre><code>function func(id) 
      {
  
          $(document).ready(function () 
          {
              $(".toggle").click(function () 
              {
                  $("td:nth-child(" + id + ")&gt;div").toggle();
  
              });
          });
          return false;
          }
  </code></pre>
  
  <p>Am attempting to hide the column corresponding to the button clicked. But this code gets some unexpected output like both the columns hiding when one button is clicked. where am i going wrong?</p>
  
  <pre><code>&lt;table border="1"&gt;
  &lt;tr&gt;
   &lt;th&gt;&lt;button class="toggle" id="1" onclick="return func(this.id);" &gt;hide&lt;/button&gt;&lt;/th&gt;
    &lt;th&gt;&lt;button class="toggle" id="2" onclick="return func(this.id);" &gt;hide&lt;/button&gt;&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt; &lt;div&gt;row 1, cell 1&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt;&lt;div&gt;row 1, cell 2&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
    &lt;td&gt;&lt;div&gt;row 2, cell 1&lt;/div&gt;&lt;/td&gt;
    &lt;td&gt; &lt;div&gt;row 2, cell 2&lt;/div&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>