push replaces the old value in the array

Question

Maybe its because I have been working all day and I can't see the problem. But in the following code the alert only shows the last added value and doesn't push the value in the array. :(

window.sortControl = {
            sortControlPanel: $('div.sortControl'),
            simpleSortCriteriaList: $('div.sortControl .simple'),
            advancedSortCriteriaList: $('div.sortControl .advanced'),
            dropDownExpander: $('div.sortControl .dropDownExpand.primary'),
            dropDownContent: $('div.sortControl .dropdownContent.primary'),
            simpleSortCriteria: $('div.sortControl .sortcriteria.simple a'),
            simpleSortCheckboxes: $('.simple .checkbox'),
            openAdvancedButton: $('.openAdvanced'),
            backtoSimpleButton: $('.backtoSimple'),
            advancedDropdownContent: $('div.sortControl .advanced .dropdownContent'),
            advancedDropdownExpander: $('div.sortControl .advanced .dropDownExpand')
        };

 $.each(sortControl.advancedDropdownContent.parent(), function () {

        var dropdownContent = $(this).find('.dropdownContent');
        var input = $(this).find('input');

        $(this).find('.dropDownExpand').live('click', function (event) {
            sortControl.advancedDropdownContent.not(dropdownContent).hide('fast');
            dropdownContent.toggle('fast');
            event.preventDefault();
        });

        var currentSelectedGroups = [];

        $(this).find('li a').bind('click', function (event) {

            var criteria = $(this).text();
            //if (!currentSelectedGroups.inArray($(this).attr('class'), true)) {
            input.attr('value', criteria);
            currentSelectedGroups.push($(this).attr('class'));

            //}

            dropdownContent.toggle('fast');

            event.preventDefault();
            alert(currentSelectedGroups);
        });

    });

Some of the html:

<div class='sortcriteria advanced'>

                <label>Sort by: </label>
                <div class='controlWrapper'>
                    <input type="text" placeholder='Any' value='Any' class='dropDownExpand'>
                    <span  class='icon dropDownExpand' title='Select property type'></span>
                    <ul class='dropdownContent'>
                        <li><a href='#' class='price'>Price ascending</a></li>
                        <li><a href='#' class='price'>Price descending</a></li>
                        <li><a href='#' class='party'>Party size ascending</a></li>
                        <li><a href='#' class='party'>Party size descending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms ascending</a></li>
                        <li><a href='#' class='bedrooms'>Number of bedrooms descending</a></li>
                        <li><a href='#' class='star'>Star rating ascending</a></li>
                        <li><a href='#' class='star'>Star rating descending</a></li>                           
                    </ul>
                </div> ...

1. There are no JavaScript errors.
2. Content and this script get loaded via ajax
3. All other statements do what they are supposed to

Answer 1

You need to move var currentSelectedGroups = []; outside the each loop. You declare it once for every instance - they all work on their own version of the variable because it lives in the local scope of the each function.

Remember in javascript functions = scope