javascript - javascript 変数を img src として使用する

Question

Facebook Api を使用して、いくつかのアルバム名とそのカバー写真を取得しています。この名前と写真から、それらをリストに表示する jquery Mobile ページを作成しようとしています。

私のjavascriptコードの一部は次のようになります:

// Additional initialization code such as adding Event Listeners goes here
            FB.api('593959083958735/albums', function(response) {
                if(!response || response.error) {
                    // render error
                    alert("Noo!!");
                } else {
                    // render photos
                    for(i=0; i<response.data.length; i++){
                        albumName[i] = response.data[i].name;
                        albumCover[i] = response.data[i].cover_photo;
                        albumId[i] = response.data[i].id;

                        FB.api( albumCover[i], function(response) {
                            if(!response || response.error) {
                                // render error
                                alert("Noo!!");
                            } else {
                               // render photos
                               document.getElementById('coverPhoto').src = response.picture;
                            }
                        });


                        $("ul").append('<li>'+
                        '<a href="testFile.HTML" data-transition="slidedown">'+
                          '<img src= "nothing.jpg" id = "coverPhoto" />'+
                          '<h2>' + albumName[i] + '</h2>'+
                          '<p> Test Paragraph</p>'+
                        '</a>'+
                         '</li>')
                     .listview('refresh');

                    }
                }
            });

配列AlbumName[]にはアルバムの名前があり、repsonse.pictureすべてのアルバムのカバー写真があります。

ご覧のとおり、呼び出しから取得した名前と写真を使用して listView を動的に作成します。しかし、これは結果です。アルバムの名前はすべてOKですが、写真がめちゃくちゃです。「ネットワーク」タブで、アルバムからすべてのカバー写真を取得していることがわかります。しかし、listViewの最初のセルでのみカバー写真を上書きしているようです。なぜですか？