Trying to retrieve multiple values from within single post, store separately

[methodbox]

I have added a JQuery plugin to the basic DM book example. It's used to create keyword tags.

When the tags are created, a new span element is created with the class tagit-label.

I'm able to get the first of the spans to store as a proper text entry in mongo, but beyond that I can't get any additional tags without them getting mushed together, as in tag1tag2tag3 versus tag1, tag2, tag3.

Even when I have tried other tag plugins, I can get the tags saved as tag1, tag2, tag3, but then accessing them from mongo seems impossible.

I'm trying to determine 2 things:

1. How can I store the text contents of the additional spans using the Template.postSubmit.events function?

Note, I've had some success retrieving then contents of the spans using the following:

HMTL generated by typing in keywords:

<ul class="key-tags tagit ui-widget ui-widget-content ui-corner-all" id="key-tags">
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">tag1</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
        <input type="hidden" value="tag1" name="tags" class="tagit-hidden-field">
    </li>
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">tag2</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
        <input type="hidden" value="tag2" name="tags" class="tagit-hidden-field">
    </li>
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">tag3</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
        <input type="hidden" value="tag3" name="tags" class="tagit-hidden-field">
    </li>
    <li class="tagit-new">
        <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">
    </li>
</ul>

//post_submit.js
Template.postSubmit.events({
    //on 'submit' of a 'form' element, do this
    'submit form': function (event) {
        //prevent default form submission by browser -
            //this allows event handler to 'handle' the submission
        event.preventDefault();

        //set a variable equal to 'post' content
        var post = {
            url: $(event.target).find('[name=url]').val(),
            title: $(event.target).find('[name=title]').val(),
            tags: $(event.target).find('[class=tagit-label').html()
        };

2. How can I store them properly in mongo (such as in an array) so I can properly access them as key/value pairs?

I've tried a lot of different variations on dot notation, but none that properly retrieve the text.

Any help would be appreciated. I'm sure I'm missing something simple here but I can't seem to get it to work as expected.