jquery reading an array of objects for output in a div

Hi all,

I've been coding a function to loop through checked checkboxes, take some values, add them to an array of objects for outputting in a div.

Here's where I've got to:

function filterobj(name,group,value){
    return {
      name:name,
      group:group,
      value:value
    }


}


//Place the filter on the filterboard
$.addToFilterBoard = function()
{
		var FilterObjects = [];
		$(":checkbox", "#filter_column").each(function() {
		
			if($(this).attr("checked") == "checked" ) {
				//Get the groups and option_ids into group arrays
				var splitarray = $(this).var().split('-');
				//Get label text
				var labeltext = $("label[for='chk" + $(this).attr("id") + "']");
				//Build the array of filter objects
				FilterObjects.push(filterobj(labeltext,splitarray[0],splitarray[1]));
			}
			
		});
		
		//Now need to update the filterboard with the new filterobject
		//Loop through the filterobject - wrap the <spans> then update the inner html of <div id="filterboard">

}

Select allOpen in new window

This reads from checkboxes:

<label for="chk489"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="1-489" id="chk489" />Option 1</label>
<label for="chk499"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="1-489" id="chk499" />Option 2</label>
<label for="chk512"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="2-489" id="chk512" />Option 3</label>
<label for="chk514"><input type="checkbox" onClick="ajaxFunction();" name="filter_option[]" value="3-489" id="chk514" />Option 4</label>
..and so on..

Select allOpen in new window

The code builds an array of objects based on the label text, group_id and value - group_id is the first part of the hyphenated value (e.g. 1-489 so 1 is the group_id and 489 is the filter_id)

Now I want to update a <div> by outputting html with the group_id's wrapped in <span>'s  - Example:

<div id="filterboard">
	<span class="group>
		[x] option 1
		[x] option 2
	</span>
	<span class="group">
		[x] option 3
	</span>
	<span class="group">
		[x] option 4
	</span>
</div>

Select allOpen in new window

I understand how to replace the html between a div but could anyone help how I do the next bit of coding to loop through the array of objects and build the output as desired?

Cheers