title: addEventListener function firing an increasing amount of times each click
body: <p>I am trying to make a text based game based on a tutorial on Youtube. I have a div called "HistoryPanel" where I want divs to be appended containing a string from an object property "historyText" when "buyItemPanelbtn" is clicked. While I have managed to achieve this when I click the button again it will append the div twice and three times if I click again after that and so on. Can someone show me how to make it only append once each time the button is clicked?</p>
  
  <p>I have included the code and the object that the code is relevant to. I haven't included the other objects because there are a lot and they are not relevant to this problem. </p>
  
  <pre><code>const textElement = document.getElementById('text');
  const titleElement = document.getElementById('title');
  const buyItemPanelBackground = document.getElementById('buyItemPanelBackground');
  const buyItemPanel = document.getElementById('buyItemPanel');
  const buyItemPanelName = document.getElementById('buyPanelName');
  const buyItemPanelPrice = document.getElementById('buyPanelPrice');
  const buyPanelType = document.getElementById('buyPanelType');
  const buyItemPanelbtn = document.getElementById('buyItemPanelbtn');
  const buyItemNevermind = document.getElementById('buyItemNevermind');
  const backButton = document.getElementById('backButton');
  const closeMenuButton = document.getElementById('closeMenuButton');
  
  const optionButtonsElement = document.getElementById('option-buttons');
  
  //home screen
  const HistoryPanel = document.getElementById('HistoryPanel');
  
  
  
  // home screen buttons
  const homeScreen = document.getElementById('homeScreen');
  
  
  const menuScreen = document.getElementById('menuScreen');
  const homeLocationsButton = document.getElementById('homeLocationsButton');
  
  
  
  let state = {}
  
  function startGame() {
      state = {}
      showbrookton("Bakery");
  }
  
  
  //close locations menu
  function closeLocationsMenu(){
      menuScreen.style.display = "none";
      homeScreen.style.display = "block";
  }
  
  //close item buy window
  function closeItemBuyWindow(){
      buyItemPanelBackground.style.display = "none";
  }
  
  
  //hide buy item window when click nevermind
  buyItemNevermind.addEventListener("click", closeItemBuyWindow);
  
  // click buy button
  buyItemPanelbtn.addEventListener("click", () =&gt; {
  
      closeItemBuyWindow();
      closeLocationsMenu();
  });
  
  //display locations menu
  homeLocationsButton.addEventListener("click", () =&gt; {
      menuScreen.style.display = "block";
      homeScreen.style.display = "none";
      startGame();
  });
  
  //close locations menu
  closeMenuButton.addEventListener("click", closeLocationsMenu);
  
  // when clicking an item
  function showBuyItemPanel(){
      buyItemPanelBackground.style.display = "block";
  }
  
  function showbrookton(brooktonIndex){
      const brookton = Brookton.find(brookton =&gt; brookton.id === brooktonIndex)
      textElement.innerText = brookton.text //fill text element
      titleElement.innerText = brookton.title //title element
      while (optionButtonsElement.firstChild) { //removes all buttons
          optionButtonsElement.removeChild(optionButtonsElement.firstChild)
      }
      brookton.options.forEach(option =&gt; { //option is options and the funtion is performed on each option
          if(showOption(option) &amp;&amp; (option.text)) { //
              const button = document.createElement('button')
              button.innerText = option.text
              button.classList.add('btn')
              button.addEventListener('click', () =&gt; selectOption(option))
              optionButtonsElement.appendChild(button)
          }
          if(option.backText){ //this goes back to previous page
              const backOption = option.backText;
              backButton.addEventListener('click', () =&gt; showbrookton(backOption))
          } //else close window
      })
  }
  function showOption(option){ 
      return option.requiredState == null || option.requiredState(state)
  }
  
  function selectOption(option){
      const nextbrooktonId = option.nextText
      const history = option.historyText
      if (nextbrooktonId == "buyItem"){
          const buyItemName = option.text;
  
          buyItemPanelName.innerText = buyItemName
          buyItemPanelPrice.innerText = "Price: " + option.price
          buyPanelType.innerText = option.type
          const history = option.historyText;
          buyItemPanelbtn.addEventListener('click', () =&gt; {
              $(HistoryPanel).append("&lt;div&gt;" + history + "&lt;/div&gt;")
          })  
          return showBuyItemPanel()
      }
      state = Object.assign(state, option.setState) //this overrides the current state with the new ones
      showbrookton(nextbrooktonId)
  }
  
  const Brookton = [
      {
          id: "Bakery", 
          title: "Bakery",
          text: 'Choose a Location to visit.',
          options: [
              {
                  text: 'Bread',
                  type: 'Food',
                  price: '$4',
                  historyText: "You bought bread",
                  nextText: "buyItem",
              }
          ]
      }
  ]
  </code></pre>