Multiple Different Types of Modals in one page

In our page we are trying to have 3 different types of modals depending on the data-target attribute of buttons. We can only display the first modal and can get data to be displayed there the second and the third models won't show up. Here is the code for all of the modals:

<div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="staticBackdropLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="normalBody">
                   <p id="normalText"></p>
                   <div class="modal-footer">
 <div id="success-text"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button id="subOutButton" type="button" class="btn btn-secondary">Sub-Out</button>
 <button id="subInButton" type="button" class="btn btn-secondary">Sub-In</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="yourShift" tabindex="-1" role="dialog" aria-labelledby="yourShiftLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="yourShiftLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="yourShiftBody">
                   <p id="yourShiftText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-Out</button>
                   </div>
</div>
</div>
</div>

<div class="modal fade" id="needsSub" tabindex="-1" role="dialog" aria-labelledby="needsSubLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="needsSubLabel">Shift Details</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
</button>
 </div>
                  <div class="modal-body" id="needsSubBody">
                   <p id="needsSubText"></p>
                   <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Sub-In</button>
                   </div>
</div>
</div>
</div>

Here is an example code for the buttons that trigger the modal:

<td id="monDinner" day ="0">
<div class="list-group">
<a id="monDinnerManager" taskid = 1 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target=“#yourShift”>Manager</a>
<a id="monFirstDinner" taskid = 2 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">First Dinner</a>
 <a id="monSecondDinner" taskid = 3 class="list-group-item list-group-item-action list-group-item-light" data-container="body" data-toggle="modal"
   data-target="#staticBackdrop">Second Dinner</a>
</div>
</td>

And here is the javascript code that should populate the bodies:

if (modalId == '#staticBackdrop') {
           console.log("here");
           $('#normalText').load(dataURL,function() {
$('#staticBackdrop').modal('show');
});
           }
           else if (modalId == '#yourShift') {
           console.log(modalId);
           $('#yourShiftText').load(dataURL,function() {
           $('#staticBackdrop').modal({show:false});
           $('#needsSub').modal({show:false});
$('#yourShift').modal({show:true});
});
           }
           else {
           $('#needsSubText').load(dataURL,function() {
$('#modal-body').modal({show:true});
});
           }

Thank you very much in advance!