Hide and Show a table row depending on the row number

I am working on a project of mine where I have two tables. The first table contains companies and the second the services each company has. I would like to implement a new feature. When I click at a row in the companies table, I would like to get the ID and display in the second table with the services only those rows associated to that specific ID.

I have already find how to get the id from the first table. I am now against some code which I am not so familiar.

$(document).ready(function() {
$('#firsttable').find('tr').click( function(){
    var row = $(this).find('td:first').text();
    alert('You clicked ' + row);
    //$('#test').toggle('slow');
    var $rowsNo = $('#test tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(1).text()) === row;
    }).toggle();
});
});

My first table has id="firsttable" and the second id="test". This row

alert('You clicked ' + row);

outputs successfully the id. Now what i am trying to do with this part of code

var $rowsNo = $('#test tbody tr').filter(function () {
        return $.trim($(this).find('td').eq(1).text()) === row;
}).toggle();

is to hide every row in the table with id="test" (services) that has in the second column value equal to the row variable. For example if row is 2 I need to hide all rows from the services table that have in the second col value equal to 2. Waiting for tips. Thanks!