title: connect a html buttons with a javascript Object
body: <p>I'm coding a browser RPG game in JavaScript and I would like to create an inventory.</p>
  <p>For each item added I want some buttons for equip item, drink a potion etc but I can't get the Object of the item selected on the list of my div <code>#inventory</code></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  &lt;div id="inventory"&gt;&lt;/div&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  
  var inventory = {
      potion : [],
      weapon: [],
  }
  
  class Item {
   
      constructor(name) {
          this.element       = document.createElement('div');
          this.name          = name;
          this.btnUse        = document.createElement('button');
          this.btnDelete     = document.createElement('button');
          this.btnEquip      = document.createElement('button');
          return this;
      }
    
      delete() {
          this.element.remove();
          const itemType = Object.getPrototypeOf(this).constructor.name.toLowerCase();
          inventory[itemType].splice(inventory[itemType].indexOf(this), 1);
      }
  
      addInventaire() {
          document.querySelector("#inventory").appendChild(this.element);
          const itemType = Object.getPrototypeOf(this).constructor.name.toLowerCase();
          inventory[itemType].push(this);
  
          let boirePotion = this.btnUse;
          boirePotion.setAttribute("class", "boirePotion");
          boirePotion.innerHTML = "drink potion";
          document.querySelector("#inventory").appendChild(boirePotion)
  
          let supprimer = this.btnDelete;
          supprimer.setAttribute("class", "supprimer")
          supprimer.innerHTML  = "delete";
          document.querySelector("#inventory").appendChild(supprimer);
      }
  }
    
  class Potion extends Item {
    
      constructor(name, value) {
          super(name);
          this.value             = value;
          this.element.innerText = this.description;
          return this;
      }
  
      get description() {
          return this.name + ' : ' + this.value;
      }
    
  }
  
  var healPotion    = new Potion("heal potion", 10);
  var healPotionOne = new Potion("heal potion 1", 10);
  var healPotionTwo = new Potion("heal potion 2", 10);
  
  healPotion.addInventaire();
  healPotionOne.addInventaire();
  healPotionTwo.addInventaire();
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>