Why am I getting ReferenceError: boxes is not defined error

Question

I have declared a global variable and am using it to capture a value from a multiple select event. However, I am confused why I am getting this error in my modal window. Funny thing is, that the other vars dept, address are working fine.

In firebug console I can see the values are being displayed correctly. I would be grateful if someone could point out my error. Thanks

code that declare var boxes;

<script>

        $(function () {
            var boxes;
            $('.switch-item').click(function (e) {
                e.preventDefault();

                var src = $(this).data('src');
                var dst = $(this).data('dst');
                var sel = $('#' + src + ' option:selected').detach();
                $('#' + dst).append(sel);
                $("#boxdest option:selected").prop("selected", false)
                $('#srcBoxRslt').val('');
                $('#srcBox').val('');
                $('#counter').html( 'Total selected boxes for destruction: ' + $('#boxdest2 option').length );
                $( "#submit" ).prop( "disabled", false );

                boxes = $('#boxdest2').val();
                console.log(boxes);

            }); // end click 

            $('form').submit(function () {
                if ($('#boxdest2').children().length == 0) {

                    notif({
                        type: "error",
                        msg: "<b>ERROR:<br /><br />You must enter some box(es) for destruction</b><p>Click anywhere to close</p>",
                        height: 99,
                        multiline: true,
                        position: "middle,center",
                        fade: true,
                        timeout: 3000

                    });


                    return false;
                }
                $('#boxdest2 option').prop({
                    selected: true
                });

            });

        });
</script>

Error is in this code

<script type="text/javascript">
$(function () {
    $('#destroy').click(function (e) {
        $.Zebra_Dialog(
            'Department: ' + depts +
            '<br />' +
            'Address: ' + address +
            '<br />' +
            'Boxes: ' + boxes <--- ERROR
        ,{
            'type': 'confirmation', 
            'title':    'Destroy'
        });
    });
});
</script>

Answer 1

<script>
        var boxes; // this is the global scope.

        $(function () {
            var boxes; // Should not be here. This not the global scope. This is the scope of the function ( which is passed on document.ready event )

        });
</script>