greasemonkey - GM_xmlhttpRequest loses data in jQuery .each() statement

Question

I've some pages with URL like this: www.example.com/index.php?id={a number} and each page has the same <select> element:

<select id="foo">
    <option value="1">Page1
    <option value="2">Page2
    <option value="3">Page3
    <option value="4">Page4
</select>

and each page has a <ul> element with different li values:

<ul id="other">
    <li class="var1">some_value1_page[n]</li>
    <li class="var2">some_value2_page[n]</li>
</ul>

The Greasemonkey script takes the <select> element (in any page) and gets the 'id' page from <option> value, and then gets the <ul> values from every page and print in a div:

...
$('#foo option').each(function(){
    $(div).append( $(this).text() );
    var pageText = '';
    GM_xmlhttpRequest ({
        method: 'GET',
        url:    'index.php?id='+$(this).attr('value'),
        onload: function (responseDetails){
                    pageText = responseDetails.responseText;
                    $(pageText).find("#other li").each(function(){
                        $(div).append( $(this).text() );
                    });
                    $(div).append('<br />');
        },
        synchronous:    true
    });
});
...

if the script is running in index.php?id=1, prints:

Page1
Page2    some_value1_page[1]    some_value2_page[1]
Page3    some_value1_page[2]    some_value2_page[2]
Page4    some_value1_page[3]    some_value2_page[3]

if this is running in index.php?id=2, prints

Page1
Page2    some_value1_page[2]    some_value2_page[2]
Page3    some_value1_page[2]    some_value2_page[2]
Page4    some_value1_page[3]    some_value2_page[3]

if this is running in index.php?id=4, prints

Page1
Page2    some_value1_page[4]    some_value2_page[4]
Page3    some_value1_page[1]    some_value2_page[1]
Page4    some_value1_page[4]    some_value2_page[4]

some ideas??

Answer 1

Waitting for answers