jQuery .on() function not working as intended

Question

I have working jQuery that is adding a count depending on the number of selected items, the problem is i have multiple selectors and multiple count display fields. I'm not quite sure why this isn't working.

When i change 1 selected it changes the count for all the select.

/*Account Group Count*/
$( 'body' ).on('change', $('#group-accounts'),function() {
    var strAccount = $( "select option:selected" ).length;
    $( ".AccountCount" ).text( strAccount );
    $( ".AccountSmallCount" ).text( strAccount + ' selected');
});

/*User Group Count*/
$( 'body' ).on('change', $('#group-users'),function() {
    var strUser = $( "select option:selected" ).length;
    $( ".UsersCount" ).text( strUser );
    $( ".UsersSmallCount" ).text( strUser + ' selected');
});

Here is one of the selects

<div class="ui-multiselect col-full group-accounts-select">                 
        <select name="group-accounts" id="group-accounts" multiple>
            <cfloop query="AccountGroupList">
                <option value="<cfoutput>#AccountGroupList.aprimID#</cfoutput>"><cfoutput>#aName#</cfoutput></option>
            </cfloop>                   
        </select>
        <label for="group-accounts"><span>Accounts:</span></label>
    </div>
    <span class="AccountSmallCount"></span>

Answer 1

/*Account Group Count*/
$(document).on('change', '#group-accounts', function(){ // <-- the difference 
    var strAccount = $(this).find(":selected").length;
    $( ".AccountCount" ).text( strAccount );
    $( ".AccountSmallCount" ).text( strAccount + ' selected');
});

/*User Group Count*/
$(document).on('change', '#group-users', function(){ // <-- the difference 
    var strUser = $(this).find(":selected").length;
    $( ".UsersCount" ).text( strUser );
    $( ".UsersSmallCount" ).text( strUser + ' selected');
});

This is how you do it (delegation):

//[root element]    [event]   [target selector] [callback]  
  $(  document ).on('change', '#group-users',   function(){..}