Form submission after dynamically adding new fields

Form submission after dynamically adding new fields

I have a form for eg.
HTML
<form id="data">
<input id="hostname" type="text" name="hostname" value="" />
</form>
And i have some javascript that adds more fields to the no. of friends i
have.
Note: i will avoid adding some of the fb api scripts to save my writing
time. add a comment if you want me to re-edit and add it.
JAVASCRIPT
<script>
//load fb api
//authenticate with permissions {scope:
email,friends_birthday,users_birthday}
FB.api('/me/friends?fields=id,name,birthday',function (friendsdata) {
for (var i = 0; i < friendsdata.data.length; i++) {
$('#hostname').after('<input type="text" name="hostid[]"
value="'+friendsdata.data[i].id+'" />');
}
$.ajax({
type: "GET",
url: "php/send.php",
data: $("#data").serializeArray(),
success: function(send) {
console.log(send);
}
});
})
</script>
PHP
$hostid = $_GET['hostid'];
print_r($hostid); // returns nothing if input field is generated using
jquery after
The above works perfectly fine. it retrieves the data and inserts in into
the fields. But the problem is when i'm trying to post this data to a php
file via ajax using serialize array.
I cannot receive ids array in php due to dynamic generation of the input
fields.
if i simply add the id field manually it works fine.
Any Suggestions or solutions ?
EDITS
Ajax save method as requested by Arun.
Regards, Dalton.