All My event Listeners I'm creating have the same Value

Question

So, I have a Function updateInventory() and I'm iterating through a array in a loop, and I assign the Event listener, the Ith value passed through a selectBlock() function, which just converts it from text to number, and I tested it, its not the issue And my issue is that all the event listeners values are the same, I know i reset the entire element at the start of the updateInventory, but i still feel that every event listener should give a different value. what am I doing wrong, and how can I fix it?

updateInventory() {
    let invenSlots = document.getElementById("inven-slots");
    while (invenSlots.firstChild) {
      invenSlots.removeChild(invenSlots.lastChild);
    }

    for (let i = 0; i < this.gameState.inventory.length; i = i + 2) {
      if (
        this.gameState.inventory[i + 1] != 0 &&
        this.gameState.inventory[i] != undefined
      ) {
        var element = document.createElement("div");
        element.classList.add("inven-box");
        element.id = this.gameState.inventory[i];
        element.innerHTML = `<span class="inven-text">${
          this.gameState.inventory[i]
        }</span>: <span class="value">${
          this.gameState.inventory[i + 1]
        }</span>`;
        element.addEventListener("click", function () {
          alert(this.selectBlock(element.id));
        }.bind(this));
        document.getElementById("inven-slots").appendChild(element);
      }
    }
  }