**使用技術**  
java,springboot,bootstrap,thymeleaf

### 実現したいこと

モーダルで確認動作を行った後、申請番号と申請ステータスを送信したいです。

### 問題点

モーダルを開いた後に申請番号の値が引き継がれておらず、送信されません。  
thymeleafにてbootstrapを使い、テーブルをforeachさせているのですが、  
テーブル内に組み込まれたモーダルボタンを押して更新処理などをすると、  
毎回一番上のデータのみ更新されます。

### 原因

thymeleafでボタンもforeachさせているため、モーダルを発火させるidが、すべて同一の物となり、どこを押しても同じデータの処理画面にいきついてしまいます。

### やってみたこと

モーダルにid="{#approval${vacationApp.vacationappNo}"など変数を組み込んでみたのですが、モーダル自体が開かなくなりました。  
foreachされるデータ毎にidをインクラインさせ、固有のidを振れば解決すると思ったのですが、そもそもモーダルが開かず、現状手だてが分からない状態です。

### 確認できていること

モーダルを開く前までは${vacationApp.vacationappNo}は各列に割り振られた番号の値が渡っています。  
モーダルを開いた後に、必ず一番上のデータが検出され、その値が消えているようです。

bootstrapのみならず、javaやjavascript側での処理でも実現可能であれば、  
どうぞご教示お願いいたします。

```

    <tbody>
            *その他<th>省略
    
            <!-- ROLE_ADMIN権限のときは活性 -->
            <td sec:authorize="hasRole('ADMIN')">
                <form th:action="@{/vacationAppList/approval}" method="post"
                    th:object="${VacationAppApprovalForm}">
                    <input type="hidden" name="vacationappNo"
                        th:value="${vacationApp.vacationappNo}" /> <input
                        type="hidden" name="appStatus" value="1">
                    <button type="button" class="btn btn-primary btn-block"
                        data-toggle="modal" data-target="#approval">承認</button>
    
                    <!-- ボタン・リンククリック後に表示される画面の内容 -->
                    <div class="modal fade" id="approval" tabindex="-1"
                        role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4>承認確認画面</h4>
                                </div>
                                <div class="modal-body">
                                    <label>申請を承認しますか？</label>
                                    <p th:text="${vacationApp}">
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default"
                                        data-dismiss="modal">閉じる</button>
                                    <button type="submit" class="btn btn-primary">承認</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </td>
    
            <!-- ROLE_ADMIN権限のときは活性 -->
            <td sec:authorize="hasRole('ADMIN')">
                <form th:action="@{/vacationAppList/approval}" method="post"
                    th:object="${VacationAppApprovalForm}">
                    <input type="hidden" name="vacationappNo"
                        th:value="${vacationApp.vacationappNo}" /> <input
                        type="hidden" name="appStatus" value="2">
                    <button type="button" class="btn btn-danger btn-block"
                        data-toggle="modal" data-target="#dismiss">否認</button>
    
                    <!-- ボタン・リンククリック後に表示される画面の内容 -->
                    <div class="modal fade" id="dismiss" tabindex="-1"
                        role="dialog" aria-labelledby="basicModal" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4>否認確認画面</h4>
                                </div>
                                <div class="modal-body">
                                    <label>申請を否認しますか？</label>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-default"
                                        data-dismiss="modal">閉じる</button>
                                    <button type="submit" class="btn btn-danger">否認</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </td>
        </tr>
    </tbody>
    
```
CC BY-SA 4.0
2021-09-11T13:38:50.280
82427
2023-01-08T05:03:00.320
2021-09-11T16:53:21.813
3060
41023
question
javascript java bootstrap thymeleaf
モーダルをforeachすると、同じデータしか検出されない
id を個別につけるとモーダルが開かなかったのは、modal の div の `id` を変えただけで、button の `data-target`
を変えていなかったからではないでしょうか。`data-target` の方も対応して変更すればモーダルが開くはずです。

※bootstrap のドキュメントでは、CSS の都合で、モーダル用の HTML
はトップレベルに配置することが推奨されていることに一応ご注意ください。レイアウトの確認はしておくと安心です。

> Modals use `position: fixed`, which can sometimes be a bit particular about
> its rendering. Whenever possible, place your modal HTML in a top-level
> position to avoid potential interference from other elements.

<https://getbootstrap.com/docs/5.1/components/modal/#how-it-works>
CC BY-SA 4.0
2021-09-12T01:00:45.597
82436
2021-09-12T01:00:45.597
19110
82427
answer