Dynamic data not showing up when I serialize the data

Dynamic data not showing up when I serialize the data

I am using the following code to to dynamically add another input text
box. The problem I have is the data from the added input text boxes are
not showing when I serialize the data and pass it to my php script.
Any ideas what I m doing wrong??
Thanks
HTML CODE
<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>
JQUERY SCRIPT
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
}