Как я могу создать уникальный h4 внутри каждой карты?

Question

Я не знаю, не готов ли я к этому, или ответ прост, но я не могу понять, как мне создать уникальный h4, состоящий из имени внутри модала. Моя цель - дать каждой карточке, созданной с помощью js, уникальный модал с уникальной информацией (например (в моем случае Pokemon): имя, тип, вес, ...) после того, как она получила клик, но в моем коде каждая карточка имеет либо та же информация от последнего покемона, либо все карты имеют информацию друг от друга. Я благодарен за любую помощь, которую может оказать сообщество.

модальный:

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title" id="exampleModalLongTitle">give me unique name</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      Some information
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
  </div>
</div>

ЯШ:

const app = document.getElementById('root');
//const modal =document.getElementById("exampleModalLongTitle");
var request = new XMLHttpRequest();
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function firstPage(){
    request.open('GET', 'http://pokeapi.salestock.net/api/v2/pokemon/?limit=151', true);
    request.onload = function () {
        var data= JSON.parse(this.response);
        for(var i=0; i<151; i++){
            $("h4").html(" ");
            var k=i+1;
            const h5 = document.createElement('h5');
            var capital= capitalizeFirstLetter(data.results[i].name);
            h5.textContent = capital;
            const img = document.createElement("img");
            img.src = "pokemon/"+k+".png";
            const button = document.createElement("BUTTON");

            $("button").css("margin","1rem");
            $("button").css("borderRadius","12px");
            button.setAttribute("data-toggle","modal");
            button.setAttribute("data-target","#exampleModalCenter");
            $("h5").css("fontSize","1rem");
            $("h5").css("paddingTop","1rem");
            container.appendChild(button);
            button.appendChild(h5);
            button.appendChild(img);
            // var unique = document.createElement("h4");
            // unique.textContent=capital;
            // modal.appendChild(unique);
            $("h4").append(capital); 
        }
    };
    request.send();
}
firstPage();