XMLHTTP Request send multiple timesin Bootstrap Modal

on my webpage I have a Bootstrap5 Modal, that loads data when the animation is completed.
The data is correct on the first load, but if I close the modal by clicking on the X in the top-right corner, click the close button or click outside of the modal, and open the modal for another dataset(player), I sometimes get the correct data and sometimes wrong data.

The modal:

<!-- 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>

The function that refreshs the data:

function loadPlayerProfile(ID){
                var container = document.getElementById("myModal");
                var myModal = new bootstrap.Modal(container);
                console.log(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();
            }