Bootstrap Modal, вызванный из файла Javascript, не работает

Моя цель такая:

1. Я использую Javascript для отображения кнопки при нажатии маркера на карте.
2. Когда кнопка отображается, то, если пользователь нажмет на нее, на странице должно появиться модальное окно.

Проблема, с которой я сталкиваюсь: Модальное окно вообще не отображается.

Страница находится там: http://p4547.phpnet.org/bikes/reservation.html

Файл javascript называется: взаимодействовать-версия3.js

Мой HTML-код для Modal:

<!-- Modal -->
  <div aria-hidden = "true" aria-labelledby = "exampleModalLongTitle" class = "modal fade" id = "bookingmodal" role = "dialog" tabindex = "-1">
    <div class = "modal-dialog" role = "document">
      <div class = "modal-content">
        <div class = "modal-header">
          <h5 class = "modal-title" id = "exampleModalLongTitle">Réservation</h5><button aria-label = "Close" class = "close" data-dismiss = "modal" type = "button"><span aria-hidden = "true">&times;</span></button>
        </div>
        <div class = "modal-body">
          <div class = "guide">
            <div class = "row item">
              <div class = "col-md-12 order-md-2">
                <h2 class = "item-heading">Signature. <span class = "text-muted">Signez pour valider votre réservation.</span></h2>
                <p class = "lead">Titre<br></p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
        <div class = "modal-footer">
          <button class = "btn btn-secondary" data-dismiss = "modal" type = "button">Fermer</button>
        </div>
      </div>
    </div>
  </div>

Вот раздел Javascript:

onMarkerClick(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let name = info.name;
      let lowerName = name.toLowerCase();
      let address = info.address;
      let statusStation = info.status;
      let statusStationFr = statusStation.replace('OPEN', '<i class = "fas fa-lock-open text-success"></i>&nbsp;&nbsp; Station Ouverte').replace('CLOSED', '<i class = "fas fa-lock text-danger"></i>&nbsp;&nbsp; Station Fermée');
      let lastUpdate = info.last_update;
      let date = new Date(lastUpdate).toLocaleString();
      let availableBikes = info.available_bikes;
  // Affichage des infos de la station dans l'encart situé à droite :
      document.getElementById("name").innerHTML = `<h4 title = "Adresse" class = "details display-5"><i class = "fas fa-map-marked-alt text-danger"></i>&nbsp;Détails de la station :</h4><div class = "text-success"><h5>Station de Vélo'v</h5></div><h6>${name}</h6>`;
      document.getElementById("address").innerHTML = address;
      document.getElementById("status").innerHTML = statusStationFr;
      document.getElementById("last_update").innerHTML = `<i class = "fas fa-clock"></i>&nbsp;&nbsp; Dernière mise à jour :  ` + date;
      if (availableBikes > 1) {
        document.getElementById("available_bikes").innerHTML = `<i class = "fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélos disponibles</strong><br>
          <br>
          <form>
          <div class = "form-group row">
          <label for = "lastname" class = "col-sm-3 col-form-label">Nom :</label>
          <div class = "col-sm-9">
          <input type = "text" class = "form-control" id = "lastname" placeholder = "Votre Nom">
          </div>
          </div>
          <div class = "form-group row">
          <label for = "firstname" class = "col-sm-3 col-form-label">Prénom :</label>
          <div class = "col-sm-9">
          <input type = "text" class = "form-control" id = "firstname" placeholder = "Votre Prénom">
          </div>
          </div>
          <div class = "form-group row">
          <div class = "col-sm-12">
          <button type = "submit" class = "btn btn-danger" data-target = "#bookingmodal" data-toggle = "modal">Réserver</button>
          </div>
          </div>
          </form>`;
        }

      else if (availableBikes == 1) {
        document.getElementById("available_bikes").innerHTML = `<i class = "fas fa-bicycle"></i>&nbsp;&nbsp;<strong>` + availableBikes + `&nbsp;vélo disponible</strong><br>
          <br>
          <form>
          <div class = "form-group row">
          <label for = "lastname" class = "col-sm-3 col-form-label">Nom :</label>
          <div class = "col-sm-9">
          <input type = "text" class = "form-control" id = "lastname" placeholder = "Votre Nom">
          </div>
          </div>
          <div class = "form-group row">
          <label for = "firstname" class = "col-sm-3 col-form-label">Prénom :</label>
          <div class = "col-sm-9">
          <input type = "text" class = "form-control" id = "firstname" placeholder = "Votre Prénom">
          </div>
          </div>
          <div class = "form-group row">
          <div class = "col-sm-12">
          <button type = "submit" class = "btn btn-danger" data-target = "#bookingmodal" data-toggle = "modal">Réserver</button>
          </div>
          </div>
          </form>
          `;
      }
      else {
        document.getElementById("available_bikes").innerHTML = `<br><br><h3>Aucun vélo disponible dans cette station</h3><br><br>`;
      }
    }

Я надеюсь, что вы можете помочь мне в этом вопросе.