How to iterate over enumerated Check List (check boxes) using JQuery?

[James Dekker]

Hello there, I have the following check list (containing 2 check boxes which have 2 different e-mail addresses in them):

<div id="emailCheckListId" 
	 class="checkList">
	 <ul id="emailCheckListId_ul">
		<li>
			<label for="mycomponent.emailCheckList_0" class="checkListLabel">
				<input type="checkbox"  
					   value="[e-mail]" 
					   id="mycomponent.emailCheckList_0" 
					   name="mycomponent.emailCheckList"/>
					   [e-mail]
			</label>
		</li>
		<li>
			<label for="mycomponent.emailCheckList_1" class="checkListLabel">
				<input type="checkbox"  
				       value="[e-mail]" 
				       id="mycomponent.emailCheckList_1" 
					   name="mycomponent.emailCheckList"/> 
					   [e-mail]
			</label>
		</li>
	</ul>
</div>

Am able to use a JavaScript event listener to populate / remove from a text field, everytime a user clicks on an individual check box using this:

// Event listener which picks individual contacts
// and populates input field.
$('#emailCheckListId_ul input:checkbox').change(function() 
{
	// Declare array
	var emails = [];
	
    // Iterate through each array and put email addresses into array
    $('#emailCheckListId_ul input:checkbox:checked').each(function() 
    {
    	emails.push($(this).val());
    });
    
    // Assign variable as To: text field by obtaining element's id.
    var textField = document.getElementById("mycomponent.textfield");
    
    // Add / Remove array from text field
	textField.value = emails;
});

However, I now have an enumerated check list... Just need to append / concatenate the index number (which I stored in an hidden field and can always obtain the
correct one), but can't seem to see how to pass in the second iterator's "input:checkbox:checked".

Here's the HTML source of the checked list:

<div id="mycomponent.comment0.replyToRecipientsCheckList" 		
	 class="checkList" 
	 onclick="selectIndividualRecipients()">
	 <ul id="mycomponentcomment0.replyToRecipientsCheckList_ul">
		<li>
			<label for="mycomponent.comment0.replyToRecipientsCheckList_0" 
				   class="checkListLabel">
				   <input type="checkbox"  
				          value="[e-mail]" 
						  id="mycomponent.comment0.replyToRecipientsCheckList_0" 
						  name="mycomponent.comment0.replyToRecipientsCheckList"/>
						  [e-mail]
			</label>
		</li>
		<li>
			<label for="mycomponent.comment0.replyToRecipientsCheckList_1" 
				   class="checkListLabel">
				   <input type="checkbox"  
						  value="[e-mail]" 
						  id="mycomponent.comment0.replyToRecipientsCheckList_1" 
						  name="mycomponent.comment0.replyToRecipientsCheckList"/> 
						  [e-mail]
			</label>
		</li>
	</ul>
</div>

JavaScript:

//	Uses an event listener which picks individual contacts
//	and populates input field.
function selectIndividualRecipients() {
	var checkListPrefix = 'mycomponent.comment';	
	var index = document.getElementById("commentHiddenField").value;
	var checkListPostfix = '.replyToRecipientsCheckList_ul';
	var event =  checkListPrefix + index + checkListPostfix;
		
	$(event).change(function() {

        // Declare array
		var emails = [];

		// Iterate through each array and put email addresses into array
		
		// THIS DOESN'T SEEM TO BE WORKING:
		var test = '#' + event.attr('id') + 'input:check:checked';
		$(test).each(function() {
			alert('inside iterator');
			alert('this.val: ' + $(this).val());
			emails.push($(this).val());
			alert('emails = ' + emails);
		});

		// Assign variable to Reply To: text field by obtaining element's id.
		var textField = document.getElementById(indexedReplyTextField);

		// Add / Remove array from text field
		textField.value = emails;
}

The browser says that ($test).each() throws an exception which is not caught and this is not allowed...

What am I possibly doing wrong?

Many thanks for reading this...