jquery - GM_xmlhttpRequest が jQuery .each() ステートメントでデータを失う

Question

次のような URL を持つページがいくつかあります。www.example.com/index.php?id={a number} 各ページには同じ<select>要素があります。

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

各ページには<ul>異なる li 値を持つ要素があります。

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

Greasemonkey スクリプトは<select>要素 (任意のページ) を取得し、値から「id」ページを取得し、すべてのページから<option>値を取得<ul>して 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
    });
});
...

スクリプトが index.php?id=1 で実行されている場合、以下を出力します。

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]

これが index.php?id=2 で実行されている場合、出力されます

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]

これが index.php?id=4 で実行されている場合、出力されます

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]

いくつかのアイデア??