Запрос XMLHTTP отправляется несколько раз в Bootstrap Modal

На моей веб-странице у меня есть модальный Bootstrap5, который загружает данные после завершения анимации. Данные верны при первой загрузке, но если я закрою модальное окно, щелкнув X в правом верхнем углу, щелкну кнопку закрытия или щелкну за пределами модального окна и открою модальное окно для другого набора данных (игрока), я иногда получают правильные данные, а иногда неправильные данные.

Модальный:

<!-- Modal -->
            <div class = "modal fade" id = "myModal" 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">
                    <h5 class = "modal-title" id = "modalTitle">Spielerprofil</h5>
                    <button type = "button" class = "btn-close" data-bs-dismiss = "modal" aria-label = "Close"></button>
                  </div>
                  <div class = "modal-body" id = "modal-body">
                    <form>
                        <div class = "row">
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "summonerName">Summoner Name</label>
                                    <input type = "text" class = "form-control" id = "summonerName" aria-describedby = "summonerName">
                                </div>
                            </div>
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "lineID">LineID</label>
                                    <input type = "text" class = "form-control" id = "lineID" aria-describedby = "lineID">
                                </div>
                            </div>
                        </div>
                        <div class = "row">
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "arenaRank">Arena</label>
                                    <input type = "text" class = "form-control" id = "arenaRank" aria-describedby = "arenaRank">
                                </div>
                            </div>
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "rtaRank">RTA</label>
                                    <input type = "text" class = "form-control" id = "rtaRank" aria-describedby = "rtaRank">
                                </div>
                            </div>
                        </div>
                        <div class = "row">
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "gkRank">GK</label>
                                    <input type = "text" class = "form-control" id = "gkRank" aria-describedby = "gkRank">
                                </div>
                            </div>
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "bkRank">BK</label>
                                    <input type = "text" class = "form-control" id = "bkRank" aria-describedby = "bkRank">
                                </div>
                            </div>
                        </div>
                        <div class = "row">
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "active">Aktiv?</label>
                                    <input type = "checkbox" class = "form-check-input" id = "active" aria-describedby = "active">
                                </div>
                            </div>
                            <div class = "col-6 gx=2">
                                <div class = "form-group">
                                    <label for = "twink">Twink?</label>
                                    <input type = "checkbox" class = "form-check-input" id = "twink" aria-describedby = "twink">
                                </div>
                            </div>
                        </div>
                        <div class = "row">
                            <div class = "col-6 gx=2">
                                <label for = "competingLevel" class = "form-label">Competing Level</label>
                                <input type = "range" class = "form-range" min = "1" max = "3" id = "competingLevel">
                            </div>
                        </div>
                        <div class = "row">
                            <div class = "col gx=2">
                                <label class = "form-label" id = "messageBox"></label>
                            </div>
                        </div>
                    </form>
                  </div>
                  <div class = "modal-footer">
                    <button type = "button" class = "btn btn-secondary" data-bs-dismiss = "modal">Schließen</button>
                    <button type = "submit" class = "btn btn-primary" onclick = "savePlayerProfile()">Speichern</button>
                  </div>
                </div>
              </div>
            </div>

Функция, которая обновляет данные:

function loadPlayerProfile(ID){
                var container = document.getElementById("myModal");
                var myModal = new bootstrap.Modal(container);
                console.info(myModal);
                container.addEventListener("shown.bs.modal", function() {
                    var summonerName, arenaRank, rtaRank, gkRank, bkRank, lineID, active;
                    
                    var xhttp = new XMLHttpRequest();
                    xhttp.onreadystatechange = function(){
                        if (this.readyState==4 && this.status==200) {
                    
                            jsonObj = JSON.parse(this.responseText);
                            
                            summonerName = jsonObj.summonerName;
                            arenaRank = jsonObj.arenaRank;
                            rtaRank = jsonObj.rtaRank;
                            gkRank = jsonObj.gkRank;
                            bkRank = jsonObj.bkRank;
                            lineID = jsonObj.lineID;
                            active = jsonObj.active;
                            twink = jsonObj.twink;
                            competingLevel = jsonObj.competingLevel;
                            
                            document.getElementById('summonerName').value = summonerName;
                            document.getElementById('arenaRank').value = arenaRank;
                            document.getElementById('rtaRank').value = rtaRank;
                            document.getElementById('gkRank').value = gkRank;
                            document.getElementById('bkRank').value = bkRank;
                            document.getElementById('lineID').value = lineID;
                            document.getElementById('active').checked = active;
                            document.getElementById('twink').checked = twink;
                            document.getElementById('competingLevel').value = competingLevel;
                        }
                    }
                    xhttp.open("GET", "./utility.php?f=getMemberProfile&id = " + ID);
                    xhttp.send();
                    
                });
                myModal.show();
            }