title: jQuery: Hide/Show table rows based on clicked button
body: <p>I got two tables side by side on a page. The left table contains buttons with company names, and the right table should contain employees connected to specific companies.</p>
  
  <p>When you load the page there shouldn't be any employees. If the user clicks on one of the buttons, the table rows with the employees connected to this company should show up. If I click on the same button again or another button, the employee rows should hide (with the new ones popping up).</p>
  
  <p>The buttons have a class with the company id (1, 2, 3..), and the rows have a class with an id like trclass1, trclass2, .. .</p>
  
  <p>I tried using this function:</p>
  
  <pre><code>    $(document).ready(function()
      {
          $(".clickbtn").click(function(event)
          {
              $('[id=trclass'+event.target.id+']').toggle();
          });
      });
  </code></pre>
  
  <p>clickbtn is the name of the button, trclass the class of the table rows.</p>
  
  <pre><code>&lt;button id='1' class='clickbtn' /&gt;
  &lt;button id='2' class='clickbtn' /&gt;
  .
  .
  
  &lt;tr id='trclass1' hidden&gt; ...
  &lt;tr id='trclass2' hidden&gt; ...
  .
  .
  </code></pre>
  
  <p>It works <em>sometimes</em>. There seems no pattern if it works or doesnt work.</p>
  
  <p>My problems are, except not knowing anything about jQuery, how to pass the argument properly to the function and making it work everytime. The jQuery code above was from another question which had quite the same problem, but was somehow different from mine. Last but not least, there isn't a constant number of how many companies or employees are there to show, the data is fetched from a database.</p>