Q:

Bootstrap multiple modals from cars within carousel

I'm trying something I've not been able to come across a solution for yet - I am trying to use cards within a carousel and have the details of those cards open a modal. This works fine for the first modal, but for the second one, it only displays the modal Backdrop, but not the modal itself. As I can't inspect it though, I'm unable to see if it is placed somewhere else on the screen. I read of problems sometimes ocuring when 2 modals are opened from inside another Bootstrap class like the card - could this be the issue here?
Sorry to be pesky, but having searched, it is difficult to see a clean solution on this (at leas for me as a beginner..:
First Carousel Slide:
 <div id="carouselExampleIndicators" class="carousel slide" data-interval="7000">
       <ol class="carousel-indicators">
           <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
           <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
       </ol>
       <div class="carousel-inner" role="listbox">
           <div class="carousel-item active" style="background-color: #000000;">
                <div class="row">
                <div class="col-12 text-center">
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 1</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Since Sep. 2017</h6>
                        <p class="card-text">Pos 1</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com1Modal" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 2</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Aug. - Sep. 2017</h6>
                        <p class="card-text">Pos 2</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com2Modal" href="#">Details</a>
                        </div>
                    </div>
                    <div class="card col-3">
                        <div class="card-body">
                        <h5 class="card-title">Com 3</h5>
                        <h6 class="card-subtitle mb-2 text-muted">Jul. 2015 – Jul. 2017</h6>
                        <p class="card-text">Pos 3</p>
                        <a type="button" class="card-link" data-toggle="modal" data-target="#com3Modal" href="#">Details</a>
                        </div>
                    </div>
                </div>
                </div>
            </div>
           <div class="carousel-item " style="background-color: #000000;">
                <div class="row">
                <div class="col-12 text-center">
                    <div class="card col-3">

And the corresponding first 2 modals:
<div class="modal fade" id="com1Modal" tabindex="-1" role="dialog" aria-labelledby="bekbModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Com 1</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body text-left">
        <p>
        <h3>Pos 1</h3>
        <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        </ul>
        Notable Projects:
        <ul>
        <li>Proj 1</li>
        <li>Proj 2</li>
        <li>Proj 3</li>
        <li>Proj 4</li>
        </ul>
        </p>
    <div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
<div class="modal fade" id="com2Modal" tabindex="-1" role="dialog" aria-labelledby="raifModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Com 2</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body text-left">
        <p>
        <h3>Pos 2</h3>
        <ul>
        <li>Job 1</li>
        <li>Job 2</li>
        </ul>
        </p>
    <div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

Is anyone able to help me with some pointers on this?
Your help is greatly appreciated.
Thank you for your help,
Simon
Additional Note:
Script links:
Hi, of course - I've included the standard JS-Scripts from Bootstrap:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Appologies: Have also included a jsfiddle now (I only just learnt about this function - my appologies):
JS-Fiddle Link

A:

Wow, very many thanks for your help. I was able to trace it based on your solution - I was opening a div after the modal-body as opposed to closing it, but because the numbers added up, I wasn't picking it up resp. I was actually under the impression the modal footer belonged within the body. It doesn't and apparently leads to this strange behaviour.
Was able to resolve it with your help.
Many thanks for your efforts.

