Firebase Storage　文字、画像の出力について

FirebaseのStorageから画像とテキストデータ（OCRで読み取ったもの）を画像[0]→テキスト[0]→画像[1]→テキスト[1]...のように出力をしたいのですが、
画像[0]→画像[1]→テキスト[0]→画像[2]→テキスト[1]というようにずれて出力されてしまいます。

html
1    <div id = "image_lilst">
2        <ul id ="img_text"></ul>
3    </div>

js
1
2
3
4
5//getvalue = "xxx"
6
7       outdb.collection('Class_Data').where("username", "==",us_subject).where("Class", "==" ,getvalue).orderBy("page").get().then((query) => {
8  query.forEach((doc) => {
9
10       var data = doc.data();
11
12       buff.push([data.FilePath]);//画像を出力する用
13       textd.push([data.FilePath_txt]);//テキストを出力する用
14       filename.push([data.FileName]);
15                // 取得したデータから表示するスクリプト
16
17       var images = storageRef.child(us_subject+buff[n]);//画像を出力する用
18       var texts = text_bucket.child(us_subject+textd[n]);//テキストを出力する用
19
20       prevTask = prevTask.finally(async () => {
21
22           //画像データの取得
23           await images.getDownloadURL().then(function(url){
24                var test = url;
25                console.log(test);
26
27                li = document.createElement('img');
28                li.setAttribute('src', test);              
29                li.classList.add('img_data');
30                li.setAttribute("id", getvalue+ count_i );
31                imgintext = getvalue+count_i;
32                li_i = document.getElementById("img_text");
33                li_i.appendChild(li);
34                }).catch(function(error) {
35                       console.log(error);
36                       });
37             //テキストデータを取得
38             await texts.getDownloadURL().then(function(url){
39                   var test = url;
40                   var text_u;
41                   var txt_d;
42                        
43                   var xhr = new XMLHttpRequest();
44
45                       
46                   xhr.responseType = 'text';
47                   xhr.onload = function(event) {
48                       var blob = xhr.response;
49                       txt_d = blob;
50                       li1 = document.createElement('div');
51
52
53                       text_u = getvalue+"text"+ count_t;
54
55                       li1.setAttribute("id", text_u);
56                       li1.classList.add(filename[count_i],test);
57           
58
59                       li1.textContent = txt_d;
60                       
61                       li_i.appendChild(li1);
62                       count_i = count_i + 1;
63                       };
64
65                        xhr.open('GET', url);
66                        xhr.send();
67
68
69                       }).catch(function(error) {
70                       
71                           console.log(error);
72                         });
73
74                       await console.log('done');
75
76
77                   });
78
79
80     //////////////////////////////////////////////////////////////////
81                n = n + 1;
82
83              });//foreachの終了
84~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
85~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~