javascript - ダイアログ ボックスから Javascript/Jquery を使用してフォーム データを取得する

Question

このようなダイアログボックスがあります

$("#dbSetting_div").dialog({
    height: 315,
    width: 500,
    autoOpen: false,
    modal: true,
    draggable: false,
    buttons: {
        "Save": function () {},
        "Add More": function () {
            l_i++;
            formHtml = "<div>";
            formHtml += "<form id='" + l_i + "'>";
            formHtml += "<label class = 'dbright'>DashBoard ID: </label><span class = 'dbleft'><select id='dashboard_id' class='dbSettingDD'><option>-------Select-------</option>" + dropDownDashboardName + "</select></br></span>";
            formHtml += "<label class = 'dbright'>Filtering parameter: </label><span class = 'dbleft'><select id='filter_by'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Y-Axis: </label><span class = 'dbleft'><select id='yAxis'><option>-------Select-------</option></select></br></span>";
            formHtml += "<label class = 'dbright'>Chart Tiltle: </label><span class = 'dbleft'><input type='text' id='title'/></br></span>";
            formHtml += "<label class = 'dbright'>Chart Type: </label><span class = 'dbleft'><input type='text' id='chart_type'/></br></span>";
            formHtml += "<label class = 'dbright'>Main Chart: </label><span class = 'dbleft'><input type='radio' name='mainchart' value='yes'/>Yes <input type='radio' name='mainchart' value='No'/>No</br></span>";
            formHtml += "</form>";
            formHtml += "</div>";
            $("#dbSetting_div").append("<p>" + formHtml + "</p>");
            console.log(scroll);
        }
    }
}).css("font-size", "12px");

このダイアログボックスの出力をjsonとしてシリアル化しようとしていました

$("div form").each(function(){
console.log( $(this).serialize() );
});

上記のコードを保存ボタン関数に含めてみましたが、コンソールの出力は空白です。

エラーは発生しません。

Javascript/Jqueryでフォームデータを取得する方法

JSビン