Как динамически добавить данные API в модальный режим bootstrap?

Question

Я пытаюсь динамически добавлять контент в модальный режим из данных вызова API. Я могу заставить модал всплывать, но он заполняет всю информацию из вызова API в него. Например, приведенный ниже код выполняет вызов API, отфильтровывает все, что не имеет изображения, и сопоставляет каждый элемент, создавая карточку с заголовком и изображением. Как только дом будет заполнен всеми картами, вы можете нажать на карту / div, чтобы открыть модал. Каждый модал должен извлекать данные с каждой карты, сейчас он должен только добавить заголовок / имя. Каждая карта / раздел, который я нажимаю, активирует модальный режим, но в заголовок помещаются все имена из вызова API. Что я делаю неправильно? Код ниже

HTML

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div id="modalHeader" class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modalBody" class="modal-body">

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

JS

let cardColor = '';
let cardType = '';
let cardRarity = '';
let allCards = [];
let pageNum = 1;

let getAllCards = () => {
    document.getElementById("jumbotron").innerHTML = ''
    loadingSpinner();
    fetch(`https://api.magicthegathering.io/v1/cards?page=${pageNum}&${cardColor}&${cardType}&${cardRarity}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Total-Count': 300
        },
    })
        .then(res => {

            return res.json()
        }).then(res => {
            hideSpinner()
            let cards = res.cards;
            if (cards.length === 0) {
                let jumboTron = document.getElementById("jumbotron")
                return jumboTron.innerHTML = "Sorry no cards found"
            } else {
                let filterArr = cards.filter(el => el.imageUrl !== undefined)
                let mapCards = filterArr.map(card => {
                    magicCard(card)
                    allCards = []
                    allCards.push(card)
                    cardModal(card)
                })
            }
            console.log(res.cards)
        })
}


let magicCard = (card) => {
    let divCard = document.createElement('div');
    divCard.className = "card"
    divCard.setAttribute("type", "button")
    divCard.setAttribute("data-toggle", "modal")
    divCard.setAttribute("data-target", "#exampleModal")

    let cardImg = document.createElement("img")
    cardImg.className = "card-img-top"
    cardImg.src = card.imageUrl

    let cardBody = document.createElement('div');
    cardBody.className = "card-body";

    let cardHeader = document.createElement('h5');
    cardHeader.className = "card-title"
    cardHeader.innerHTML = card.name

    let jumboTron = document.getElementById("jumbotron")

    jumboTron.appendChild(divCard);
    cardBody.appendChild(cardHeader);
    cardBody.appendChild(cardImg)
    divCard.appendChild(cardBody)

}


const cardModal = (card) => {
    // console.log(cards.name);

        let modalTitle = document.createElement("h5");
        modalTitle.className = "modal-title"
        modalTitle.id = "exampleModalLabel"
        modalTitle.innerHTML = el.name;


        let modalHeader = document.getElementById("modalHeader")

        modalHeader.appendChild(modalTitle);

}