Как передать текущие данные с динамически созданного элемента в модальное окно?

Question

Максим js @winers

Начинающий программист

Как передать текущие данные с динамически созданного элемента в модальное окно?

const projects = [
 {
    title: 'Сказка о Царе Салтане1',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-1.jpg'
  },

  {
    title: 'Сказка о Царе Салтане2',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-2.jpg'
  },
  {
    title: 'Сказка о Царе Салтане3',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-1.jpg'
  },
  {
    title: 'Сказка о Царе Салтане4',
    subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',
    src: 'https://video.lewd.host/download/videos/f1ec3b2a-ff2b-40f7-920e-f4a53b474710-360.mp4',
    poster: 'img/sk-2.jpg'
  }
];

const app = document.getElementById("app");

projects.forEach(project => {
const title = `${project.title}`;
const subTitle = `${project.subTitle}`;
const src = `${project.src}`;
const poster = `${project.poster}`;

const projectEl = document.createElement("div");
projectEl.classList.add("card");

projectEl.innerHTML =


`<div class="card" style="border:none;">
  <a href="#theModal" class="btn-link"
    data-remote="${src}"
    data-toggle="modal" data-target="#theModal">
      <img  class="rrrrr" src="${poster}" class="card-img-top" alt="...">
  </a>
  <div class="card-body">
    <h3>${title}</h3>
    <p class="card-text">${subTitle}</p>
  </div>
</div>`;

let modalTitle = document.querySelector(".modal-title");
modalTitle.innerHTML = `${title}`;

let modalText = document.querySelector(".modal-footer-text");
modalText.innerHTML = `${subTitle}`;

app.appendChild(projectEl);

});





$('#theModal').on('show.bs.modal', function (e) {
    var button = $(e.relatedTarget);
    var modal = $(this);
    modal.find('video').attr('src', button.data("remote"));
});

$('body').on('hidden.bs.modal', '.modal', function () {
    $('video').trigger('pause');
});

вот html

<!-- Modal -->
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                <video width="465" height="315" src=""  autoplay controls ></video>
              </div>
              <div class="modal-footer">
                <p class="modal-footer-text"></p>
              </div>
          </div>
      </div>
  </div>

Вообщем создается элемент на странице с заголовком и описанием. При клике по изображению открывается модальное окно и запускается видео. Я хочу передать в модальное окно тот же заголовок и описание с элемента по которому кликнул, но получается что передается всегда только последние данные из массива. То есть при клике по любому элементу в модальное окно передается всегда параметр из последнего массива в списке -> вот эти title: 'Сказка о Царе Салтане4',
subTitle: 'Приключения отважного царевича Гвидона, прекрасной царевны-Лебедь и царя Салтана напомнят о том, что любовь, верности и сила духа всегда побеждают!',

как передать текущий параметр? именно с элемента по которому был клик?