How to pass a checkbox id from HTML to JQuery?

I am attempting to write a Jquery function that moves any selected checkboxes from one div to another. However, I'm not sure how to pass the page id for each checkbox from the HTML template code to JQuery. Does anyone have any ideas?

<fieldset>   
    <h3>Pages</h3>
        <div class="fieldset_elements">
            <div id="pagecontainer">
                <div class="selectpagebox" id="pagebox1">
                    <h4>Available Pages</h4>
                        {foreach from=$pagelist item=page}
                             <div class="pageSelection"><input type="checkbox" id="{$page.id}" value="{$page.id}" {if $page.id eq $selectedPage} selected="true" {/if}">{$page.page_name}</div>
                        {/foreach}
                </div>
                <div class="selectpagebox" id="pagebox2">
                    <h4>Selected Pages</h4>
                    {foreach from=$selectedPage item=page}
                        <span id="page" class="pageSelection"> <option value="{$page.id}" {if $page.id eq $selectedPage} selected="true" {/if}">{$page.page_name}</option></span>
                    {/foreach}
                </div>
            </div>
        </div>
    </fieldset>

$(function () {
    // Check if user clicks on the checkbox
    $('#' + id).click(function() {

        if($('#' + id).is(":checked")){

            $("#pagebox1").contents().appendTo("#pagebox2");
        } else {

            $("#pagebox2").contents().appendTo("#pagebox1");
        }
    });
});