Почему работает только 1 модальное окно в бутстрап, которое выше остальных?

Question

[Hanry654]

Если же поставить testTwo выше testOne, то тогда testTwo будет работать, а testOne нет и наоборот.

<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>

Если поменять местами