Show hide multiple divs on multiple elements

I have to show opened works (1, 2, 3...) in tables including a list of related tasks (1, 2, 3...), each one in a row. The tasks may be opened or closed. I try to find a way to hide/show the closed tasks (rows) for a specific work (table) by clicking on an element like the line in class "showhideforwork-x".

<table class="work-1">
  <tr class="showhideforwork-1"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-1"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-1"><td>Task 3 (closed)</td></tr>
  <tr><td>Task 4 (opened)</td></tr>
</table>

<table class="work-2">
  <tr class="showhideforwork-2"><td>Hide closed tasks</td><tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr class="showhidework-2"><td>Task 1 (closed)</td></tr>
  <tr><td>Task 3 (opened)</td></tr>
</table>

<table class="work-n">
  <tr class="showhideforwork-3"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-n"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-n"><td>Task 3 (closed)</td></tr>
</table>

I think I don't use the classes the way it should be to catch the click on "showhideforwork-x" elements and hide/show the corresponding "showhidework-x" rows.

Solution

You should assign a common class to the closed elements, find all elements with that class inside the parent and hide/show (toggle) them

HTML

<table class="work-1">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr>
  <tr><td>Task 4 (opened)</td></tr>
</table>

<table class="work-2">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 1 (closed)</td></tr>
  <tr><td>Task 3 (opened)</td></tr>
</table>

<table class="work-n">
  <tr class="showhideforwork"><td>Hide closed tasks</td><tr>
  <tr><td>Task 1 (opened)</td></tr>
  <tr class="showhidework-closed"><td>Task 2 (closed)</td></tr>
  <tr class="showhidework-closed"><td>Task 3 (closed)</td></tr>
</table>

jQuery Code

$(".showhideforwork").click(function() {
  $(this).parent().find(".showhidework-closed").toggle();
});

Edit: Fiddle Demo