【Bootstrap】モーダルを1つのページに2つ実装する時に注意しなければならないこと

#Bootstrapモーダルを1つのページに2つ実装する時に注意しなければならないこと
モーダルを1つのページに2つ実装すると、どちらのボタンを押しても片方のモーダルウィンドウしか表示されません。
この記事ではその解決法をご紹介します。

###現状のコード

html.erb

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    モーダル1
</button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダル1</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
         モーダル1だよ！！！
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    モーダル2
</button>
  
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">モーダル2</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          モーダル２だよ！！！
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

このままだとモーダル2のボタンを押してもモーダル1のウィンドウが出てきてしまいます💧
　

###解決方法
どのボタンがどのモーダルウィンドウを表示させるかは<button>タグのdata-target属性を使って定義しており、data-target名と同じid名である<div class="modal fade">のモーダルが表示されます。
つまり、モーダル2のdata-target名をモーダル1とは別のに変更し、ボタンのコードの下にある<div class="modal fade"~>のid名を変更したdata-target名と同じにすれば問題は解決されます。

#変更前
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    モーダル2
</button>

 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

#変更後
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">　#data-bs-target="#exampleModal"　→　data-bs-target="#exampleModal2"
    モーダル2
</button>

 <div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">　#id="exampleModal"　→　id="exampleModal2"