Solved: having trouble with filter() function

Hello fellow EE-ers!

I'm having trouble getting the filter() function working properly. On my page, I have a table that a user can add and delete rows from. On each row, there are a series of dropdowns that are cloned every time a new row is created.

What I want to do is count up the number of team drop downs, defined by the class "chooseTeam" along with the number of goal types, defined by the class "goalType5", when the user selects an item with a value of 1.

So far I have the following:

alert ( $("select.goalType5", tbl).filter(function () { return $(this).val() == 1 && $("select.chooseTeam", tbl).filter(function () { return $(this).val() == homeTeamID }) }).length);

Open in new window

the variable tbl in this case is defined as "#tblPeriod5" and homeTeamID is a global variable set to one of the 2 team IDs that are defined in the dropdown.

my mark up for the table is as follows:

<table id="tblPeriod5">
                        
                    <tr id="row5_1">
                        <td class="col1">
                            <select class="chooseTeam" id="selScoringTeam5_1" onchange="return updateScoreboard( 5, $(this), true );">
                                <option value=''>Select Team</option><option value='129'>The All Blacks</option><option value='128'>Puck Buddies</option>
                            </select>
                        </td>
                        <td class="col2">&nbsp;</td>
                        <td class="col3">
                            <select class="scoredBy5" id="selScoredBy5_1">
                                <option value="">Attempted By</option>
                            </select>

                            <select class="goalieSO_5" id="selGoalie5_1">
                                <option value="">Opposing Goalie</option>
                            </select>
                        
                            <!--<select class="assistBy1_5" id="sel1stAssist5_1">
                                <option value="">Unassisted</option>
                            </select>
                        
                            <select class="assistBy2_5" id="sel2ndAssist5_1">
                                <option value="">Unassisted</option>
                            </select>-->
                        </td>
                        <td class="col4">
                            <select class="goalType5" id="selGoalResult5_1">
                                <option value="">Result</option>
                                <option value="1">Made</option>
                                <option value="0">Missed</option>
                            </select>
                        </td>
                            <td class="col5">
                            <a id='a5_1' href='#' onclick="return deleteRow( 5, 1 )">delete</a>
                            </td>
                        </tr>
                        
                        </table>

Open in new window

I know I'm close as I've used this method for filtering things with one criteria, its when I add a 2nd one it doesn't return the right value.

Thanks In Advance!

Cheers
Josh