Creating buttons using JavaScript API to fetch data and display the data

Question

I'm using an API to display the names of players and details about the players. the buttons when clicked should show players' information and the other button is supposed to remove a player from a roster list, but my buttons are not working correctly. I got one button to work, but it would only release the player's information when it is supposed to show it. here's my code:

const playerContainer = document.getElementById('all-players-container');
const newPlayerFormContainer = document.getElementById('new-player-form');


// Add your cohort name to the cohortName variable below, replacing the 'COHORT-NAME' placeholder
const cohortName = '2302-ACC-PT-WEB-PT-B';
// Use the APIURL variable for fetch requests
const APIURL = `https://fsa-puppy-bowl.herokuapp.com/api/${cohortName}/`;

/**
 * It fetches all players from the API and returns them
 * @returns An array of objects.
 */
const fetchAllPlayers = async () => {
    try {
        const response = await fetch(`https://fsa-puppy-bowl.herokuapp.com/api/${cohortName}/players`);
        const result = await response.json();
        const players = result.data.players;
        return players;
     } catch (err) {
        console.error('Uh oh, trouble fetching players!', err);
        return [];
       
    }
};

const fetchSinglePlayer = async (playerId) => {
    try {
        const response = await fetch(`https://fsa-puppy-bowl.herokuapp.com/api/${cohortName}/player/${playerId}`);
        const result = await response.json();
        const player = result.data.player;
        return player;
    } catch (err) {
        console.error(`Oh no, trouble fetching player # ${playerId} !`, err);
        return null;
    }
};

const addNewPlayer = async (playerObj) => {
    try {
        const response = await fetch(`https://fsa-puppy-bowl.herokuapp.com/api/${cohortName}/players`, {
            method: 'POST',
            headers: {
               'Content-Type' : 'application/json'
            },
            body: JSON.stringify({ player: playerObj })
        });
        const result = await response.json();
        return result.data.player;
        } catch (err) {
        console.error('Oops, something went wrong with adding that player!', err);
        return null;
    }
};

const removePlayer = async (playerId) => {
    try {
        const response = await fetch(`https://fsa-puppy-bowl.herokuapp.com/api/${cohortName}/player/${playerId}`, {
            method: 'DELETE'
           });
           const result = await response.json();
           return result.success;
           } catch (err) {
           console.error(`Whoops, trouble removing player #${playerId} from the roster!`, err);
           return false;
        }
  };

/**
 * It t akes an array of player objects, loops through them, and creates a string of HTML for each
 * player, then adds that string to a larger string of HTML that represents all the players. 
 * 
 * Then it takes that larger string of HTML and adds it to the DOM. 
 * 
 * It also adds event listeners to the buttons in each player card. 
 * 
 * The event listeners are for the "See details" and "Remove from roster" buttons. 
 * 
 * The "See details" button calls the `fetchSinglePlayer` function, which makes a fetch request to the
 * API to get the details for a single player. 
 * 
 * The "Remove from roster" button calls the `removePlayer` function, which makes a fetch request to
 * the API to remove a player from the roster. 
 * 
 * The `fetchSinglePlayer` and `removePlayer` functions are defined in the
 * @param playerList - an array of player objects
 * @returns the playerContainerHTML variable.
 */
const renderAllPlayers = (playerList) => {
    try {
        let playerContainerHTML = '';
        playerList.forEach((player) => {
            playerContainerHTML += `
        <div class="container">
         <div class="player-card">
          <img src="${player.imageUrl}" alt="${player.name}">
            <h2>${player.name}</h2>
            <p>${player.breed}</p>
            <p>${player.status}</p>
              <button class="details-button" data-player-id="${player.id}">See details</button>
              <button class="remove-button" data-player-id="${player.id}">Remove from roster</button>
          </div>
        </div>`;
        });
        playerContainer.innerHTML = playerContainerHTML;
        // Add event Listeners to the buttons in each player card
        const seeDetailsBtns = document.querySelectorAll('.details-button');
        const removeFromRosterBtns = document.querySelectorAll('.remove-button');
/*See Details button functionality,
 To be able to see the details about player*/
         seeDetailsBtns.forEach((btn) => {
            btn.addEventListener('click', async (event) => {
                const playerId = event.target.dataset.playerId;
                const player = await fetchSinglePlayer(playerId);
                console.log(player);
            

        
               });
        
            });
        
         removeFromRosterBtns.forEach((btn) => {
           btn.addEventListener('click', async (event) => {
                const playerId = event.target.dataset.playerId;
                const success = await removePlayer(playerId);
                console.log(success);
             });
           });
  
        } catch (err) {
        console.error('Uh oh, trouble rendering players!', err);
    }
};


/**
 * It renders a form to the DOM, and when the form is submitted, it adds a new player to the database,
 * fetches all players from the database, and renders them to the DOM.
 */
const renderNewPlayerForm = () => {
    try {
        // Create the form element
        const newPlayerForm = document.createElement('form');

        // Add form elements (input fields, buttons, etc) to the form element

        // Add an event Listener to the form submission
            newPlayerForm.addEventListener('submit', async (event) => {
               event.preventDefault();
            
            // retrieve form data
            const formData = new FormData(newPlayerForm);
            await addNewPlayer(Object.fromEntries(formData));


            // send request to add the new player to the database
            const players = await fetchAllPlayers();

            // render all players to the DOM
            renderAllPlayers(players);

            // Clear the for
            newPlayerForm.reset();
       });

         // Append the form to the DOM
        newPlayerFormContainer.appendChild(newPlayerForm);

``your text``catch (err) {
        console.error('Uh oh, trouble rendering the new player form!', err);
    }
}

const init = async () => {
    const players = await fetchAllPlayers();
    renderAllPlayers(players);
    renderNewPlayerForm();
}

init();