Multiple modale billeder på samme side med Boostrap - how to

Hvordan kan jeg have multiple modale billeder på samme side?

Understående virker desværre ikke ...

<style>
.modal-close {
  float: right;
  font-size: 1em;
  font-weight: 100;
  line-height: 1;
  background-color: #FFFFFF;
  color: #666666;
  padding: 10px;
  border: solid 1px #cfcfcf;
  border-radius: 5px;
  transition: .3s; }

.modal-close:hover {
  background-color: #272727;
  color: #ffffff; }
 
.modal-popup {
  background-color: #454343; }

.modal-myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s; }

.modal-myImg-01 {
  width: 100%;
  max-width: 1200px;
  height: auto;
  box-shadow: 0px 0px 8px 3px rgba(133,136,138,0.80);
  border-radius: 3px; }

.modal-headline { padding: 5px 0 5px 0; }

.modal-text {
  font-size: .9em;
  font-style: italic;
  text-align: center;
  padding-top: 5px; }
</style>

<div class="container spacing">
<div class="row">

<div class="col-md-12">
<h1>Den smarte bil</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="text-center">
<img id="modal-btn" class="modal-myImg  img-fluid01" src="https://www.w3schools.com/w3css/img_car.jpg" alt="" style="width:100%; max-width:330px; cursor: pointer;">
</div>
<p class="modal-text">Klik på billedet for se forstørrelse.</p>

<div id="modal-content">
    <div class="modal-inner-content">
        <h2 class="modal-headline">En smart bil</h2>
            <img class="modal-myImg-01" src="https://www.w3schools.com/w3css/img_car.jpg" alt="">
            <p class="modal-text">En smart bil.</p>
    </div>
</div>
</div>

<div class="col-md-12">
<h1>Den smarte bil 2</h1>
    <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="text-center">
<img id="modal-btn-01" class="modal-myImg  img-fluid01" src="https://www.w3schools.com/w3css/img_car.jpg" alt="" style="width:100%; max-width:330px; cursor: pointer;">
</div>
<p class="modal-text">Klik på billedet for se forstørrelse.</p>

<div id="modal-content-01">
    <div class="modal-inner-content">
        <h2 class="modal-headline">En smart bil. 2</h2>
            <img class="modal-myImg-01" src="https://www.w3schools.com/w3css/img_car.jpg" alt="">
            <p class="modal-text">En smart bil. - 2</p>
    </div>
</div>
</div>

</div>

</div>
<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Overskrift',
                buttons: [{
                    text: $.mage.__('Luk vindue'),
                    class: 'modal-close',
                    click: function (){
                        this.closeModal();
                    }
                }]
            };

            modal(options, $('#modal-content, #modal-content-01'));
            $("#modal-btn, #modal-btn-01").on('click',function(){
                $("#modal-content, #modal-content-01").modal("openModal");
            });
        }
    );
</script>