Bootstrap dialog window opens behind another dialog window instead of infront - html

Question

A dialog window is incorrectly opening behind another dialog window. I use the #modalMidWestEquipPlans data target to open the dialog window. How do I tweak the code so that the hyperlink opens the dialog window in front? Most solutions to a similar issue talk about tweaking a z-index but I do not have that in this code.
Thank you
<div class="col col mb-4">
<div class="card metro-card rounded mb-0 bg-primary">
<div class="card-body ">
<h5 class="card-title">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#modalEquipPlans">
Equipment
</button>
</h5>
</div>
</div>
</div>
<div class="modal fade" id="modalEquipPlans" tabindex="-1" role="dialog" aria-labelledby="modalEquipPlansTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title ModalTitleOR" id="modalEquipPlansLongTitle">Equipment</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Equipment Plans</strong>
<div class="list-group">
<!-- (other list group items removed) -->
<div class="list-group-item bg-danger h5 fake-btn">
<a class="clsPointer" data-toggle="modal"
data-target="#modalMidWestEquipPlans">
<span class="addUnderlines">AFTER CLICKING THIS HYPERLINK, THE DIALOG BOX OPENS BEHIND THIS DIALOG INSTEAD OF IN FRONT</span>
</a>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>