jquery - データをシリアル化すると動的データが表示されない

Question

次のコードを使用して、別の入力テキスト ボックスを動的に追加しています。私が抱えている問題は、データをシリアル化してphpスクリプトに渡すと、追加された入力テキストボックスからのデータが表示されないことです。

私が間違っていることは何ですか??

ありがとう

HTMLコード

<div class="control-group" id="ports">
<label class="control-label" for="dataport1">dataport</label>
<div class="controls">
    <input type="text" id="dataport_1" name="dataport_1" placeholder="Type something">
</div> <!-- end controls -->
</div><!-- end control-group-->
<div class>
    <a class="btn btn-primary pull-right" id="addportbtn">Add Another Port</a>
</div>

Jクエリスクリプト

function addPorts()
{

    var count = 2;
    var numports = 2;
    var idnum;

    $('#addportbtn').click(function() {
    //alert(count);
    numports = idnum;
    var addHtml =   '<div class="control-group">' +
            '<label class="control-label" for="dataports">data port</label>'+
            '<div class="controls">'+
            '<input type="text" id="dataport_idnum" placeholder="Type something">'+
            '</div> <!-- end controls -->'+
            '</div><!-- end cotrol-group-->'
        $( "#ports:last" ).after(addHtml);

        numports = numports + 1;
        count++;

    }); //end click
}