Problem with XML HttpRequest and bootstrap modal

I’m filling bootstrap cards with an external json file via XML HttpRequest. This works, all information is shown in the cards.
Now I would like to press “More info” to open a bootstrap modal with more information about the item.

The problem is when I press “More info” the data of the first item1 is always taken.
I know that the solution is that I have to pass the id of the elements to the modal, so that the correct data of the elements can be retrieved.

But I don’t understand how I can pass the id of an item to the modal?


    "id": 1,
    "name": "item1",
    "price": "€5",
    "size": "XS",
    "color": "Green"
}, {
    "id": 2,
    "name": "item2",
    "price": "€10",
    "size": "S",
    "color": "Yellow"
}, {
    "id": 3,
    "name": "item3",
    "price": "€15",
    "size": "M",
    "color": "Blue"
}, {
    "id": 4,
    "name": "item4",
    "price": "€20",
    "size": "L",
    "color": "Red"
}, {
    "id": 5,
    "name": "item5",
    "price": "€25",
    "size": "XL",
    "color": "Gray"
}, {
    "id": 6,
    "name": "item6",
    "price": "€30",
    "size": "XXL",
    "color": "Black"

JS script of my program

    const divRes = document.querySelector('#divResult');

    myRequest = () => {
        let xhr = new XMLHttpRequest();'GET', 'files/elements.json', true);
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status != 200) {
                    divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
                } else {
                    const arrResponse = JSON.parse(xhr.responseText);
                    divRes.innerHTML = createHTMLCard(arrResponse);

        xhr.onerror = function() {
            divRes.innerHTML = "Request failed";

    createHTMLCard = (arrObj) => {
        let res = '';

        for (let i = 0; i < arrObj.length; i++) {
            res +=
                `<div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card m-2">
                            <div class="card-body">
                                <h5 class="card-title">${arrObj[i].name}</h5>
                                <p><strong>Prijs:</strong> ${arrObj[i].price}</p>
                                <button id="moreInfo" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">More info</button>

                 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-scrollable">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLabel">${arrObj[i].name}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                <div class="modal-body">
                                    <p><strong>Price:</strong> ${arrObj[i].price}</p>
                                    <p><strong>Size:</strong> ${arrObj[i].size}</p>
                                    <p><strong>Color:</strong> ${arrObj[i].color}</p>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        return res;

    window.addEventListener('load', myRequest);

Bootstrap cards

Bootstrap modal