Why is only 1 modal in bootstrap working, which is above the rest?

Question

Bootstrap

If you put testTwo above testOne, then testTwo will work, but testOne will not, and vice versa.

<a class="ml-3" type="button" data-toggle="modal" data-target="#testOne">
    1
</a>
<a class="ml-3" type="button" data-toggle="modal" data-target="#testTwo">
    2
</a>

<!--  Work -->
<div class="modal fade" id="testOne" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="testOne" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="testOne">123</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <div class="modal-body">
        <p>123</p>
      </div>
    </div>
  </div>

<!-- not working -->
<div class="modal fade" id="testTwo" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="testTwo" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="testTwo">123</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
          </button>
        </div>
      <div class="modal-body">
        <p>123</p>
      </div>
    </div>
  </div>

If you swap

Answer 1

close in both cases <div class="modal fade" .....