javascript - Posting dynamically appended dropdown data -

i have dropddown on homepage on select, appends dropdowns based on value selected, shown in fiddle:

https://jsfiddle.net/harunthuo/he55vwca/3/

the challenge i'm facing is: dropdowns appended dynamically based on value selected in 'children' dropdown. i'm wondering how capture value(s) of each of appended dropdowns , capture in post. appended dropdown(s) have same name , class attribute if grab selection of appended dropdown(s):

$('#children-number').on('change', '.children-num', function(e){     var child_num = e.target.value;     console.log(child_num); }); 

this capture values selected in each appended dropdown. how proceed here capture these values , send them post capture value(s) such:

$('#children-number').on('change', '.children-num', function(e){         var child_num = e.target.value;         console.log(child_num);          var data = $('#myform').serializearray();         data.push({name: 'ages', value: child_num});          $.post("page.php", data); }); 

this last part i'm bit stuck. thanks

ok, maybe can move along:

try (but maybe outside change function, maybe button-click):

 var dataarr = [];    $('.children-num').each(function() {     value = $(this).val();     dataarr.push(value);  }); 

and instead of

data.push({name: 'ages', value: child_num}); 

do

data.push({name: 'ages', value: dataarr}); 

now should

["ages"]=> array() 

or similar

here's fiddle logs values of child-nums in console after clicked "click-me" button

edit: i'd recommend not doing $.post inside change event rather on button click or similar too, since post every time selection changed, don't think that's practice