Элементы формы диалогового окна JQuery UI не отправляются вместе с формой

У меня есть диалоговое окно div в моей форме. Дива заполняется флажками динамически с помощью JavaScript. Когда я нажимаю ссылку, чтобы открыть диалоговое окно, выберите несколько флажков, закройте, отправьте, моя страница процесса PHP не регистрирует выбранные флажки как элементы POST.

Итак, я считаю, что, поскольку флажки динамически генерируются после загрузки страницы, они фактически не зарегистрированы как элементы в форме? Это верно? Вооружившись этими знаниями (или их отсутствием), я понятия не имею, как обойти это.

Любая помощь будет высоко оценена, я искал для помощи безрезультатно.

HTML:

<form action="submit.php" method="POST">

        <div id="dialog" style="font-size:14px;">
            <div id="states_container">
                <div style="width:33%; float:left;" id="col1">

                </div>

                <div style="width:33%; float: left;" id="col2">

                </div>

                <div style="width:33%; float: left;" id="col3">

                </div>
            </div>

        </div>
   <input type="submit" value="Submit">
</form>

submit.js (да, я знаю, что это дерьмовый код, но я собираюсь реорганизовать):

$(function() {
    $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        event.preventDefault();
    });

    $( "#dialog" ).dialog({
    autoOpen: false,
    width: 600,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });

    var states1 = {
        AL: "Alabama", 
        AK: "Alaska", 
        AZ: "Arizona", 
        AR: "Arkansas", 
        CA: "California", 
        CO: "Colorado", 
        CT: "Connecticut", 
        DE: "Delaware", 
        DC: "District Of Columbia", 
        FL: "Florida", 
        GA: "Georgia", 
        HI: "Hawaii", 
        ID: "Idaho", 
        IL: "Illinois", 
        IN: "Indiana", 
        IA: "Iowa",
        KS: "Kansas"
    };

    var states2 = {

        KY: "Kentucky", 
        LA: "Louisiana", 
        ME: "Maine", 
        MD: "Maryland", 
        MA: "Massachusetts", 
        MI: "Michigan", 
        MN: "Minnesota", 
        MS: "Mississippi", 
        MO: "Missouri", 
        MT: "Montana",
        NE: "Nebraska",
        NV: "Nevada",
        NH: "New Hampshire",
        NJ: "New Jersey",
        NM: "New Mexico",
        NY: "New York",
        NC: "North Carolina"
    };

    var states3 = {
        ND: "North Dakota",
        OH: "Ohio", 
        OK: "Oklahoma", 
        OR: "Oregon", 
        PA: "Pennsylvania", 
        RI: "Rhode Island", 
        SC: "South Carolina", 
        SD: "South Dakota",
        TN: "Tennessee", 
        TX: "Texas", 
        UT: "Utah", 
        VT: "Vermont", 
        VA: "Virginia", 
        WA: "Washington", 
        WV: "West Virginia", 
        WI: "Wisconsin", 
        WY: "Wyoming"
    };



    $.each(states1, function(key, value) {
        $('#col1').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states2, function(key, value) {
        $('#col2').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states3, function(key, value) {
        $('#col3').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });
});