カードに背景画像をランダムに当てようとしているが、1個目のカード以外に画像が反映されない

前提

htmlとjavascriptについての質問です。
flaskを使ってtodoリストを作っています。
作った各タスクをカードに分けて、そのカードに背景画像をランダムに当てようとしているのですが、1個目のタスク以外に画像が反映されません。

実現したいこと

1個目以外のタスクにも画像がランダムに反映されるようにしたいです。

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

<div class="container">

    {% for post in posts %}

    <div class="d-inline-flex">
                <!-- タスクカードの情報 -->
                <div class="card text-white">
                    <!-- ランダムに画像をあてる -->
                    <img class="card-img" id="imageArea">
                    <script>
                        const imageArea = document.getElementById('imageArea');
                        const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
                                        "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
                                        "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
                                        "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
                                        "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
                        const imageNo = Math.floor(Math.random() * images.length)
                        imageArea.src = images[imageNo];
                    </script>
                </div>
    </div>  

    {% endfor %}

試したこと

document.write('<img src="images/'+ ~ +'.jpg" />');　みたいなのを使って画像をあててみましたが、それだと画像のサイズがcssで指定したものと違った画像が出てきてしまいました。

補足情報（FW/ツールのバージョンなど）

python3.9.6

回答1件

ベストアンサー

下記のようになります。

html
1<div class="container">
2
3  {% for post in posts %}
4
5  <div class="d-inline-flex">
6    <!-- タスクカードの情報 -->
7    <div class="card text-white">
8      <!-- ランダムに画像をあてる -->
9      <img class="card-img" id="imageArea{{ loop.index0 }}">
10    </div>
11  </div>
12
13  {% endfor %}
14
15  <script>
16    const images = ["static/randam-images/adam-borkowski-MHU8zzoEpsU-unsplash.jpg",
17                    "static/randam-images/alfredo-kambasha-KZ8ikJt_qgU-unsplash.jpg",
18                    "static/randam-images/nikita-tarasevich-dQk2mqURSzk-unsplash.jpg",
19                    "static/randam-images/olga-nayda-0dqva5dcvmc-unsplash.jpg",
20                    "static/randam-images/salah-eddine-haddad-n6xAxiKlSPA-unsplash.jpg" ];
21    for (let i=0; i<{{ posts|length }}; i++){
22      const imageArea = document.getElementById('imageArea'+i);
23      const imageNo = Math.floor(Math.random() * images.length);
24      imageArea.src = images[imageNo];
25    }
26  </script>