title: Building a button to generate a new class each time
body: <p>I've built a simple grid-based game but it currently only works for a single game and I want it to work seamlessly for multiple games without needing to refresh the page so I can preserve score data.</p>
  
  <p>When it first loads up I create a variable to instantiate a new 'Game' object</p>
  
  <pre><code>const game = new Game();
  </code></pre>
  
  <p>Inside the 'Game' object, there's a method to create a 5x4 sized grid of 20 spaces with the id for each space pulled from an array called 'positions'</p>
  
  <pre><code>createBoard() {
        // Clear the board space
        grid.innerHTML = ``;
        // Create new board space
        for (let i=0; i&lt;20; i++) {
          grid.innerHTML += `&lt;div class="box" id="${this.positions[i]}"&gt;&lt;/div&gt;`;
        }
      }
  </code></pre>
  
  <p>and there's some code to identify when the grid is clicked</p>
  
  <pre><code>grid.addEventListener("click", function clickEvent(e) {
      if (game.ready == true) {
          if (e.target !== e.currentTarget) {
              game.clickGrid(e);
          }
          e.stopPropagation();
      }
  }, false);
  </code></pre>
  
  <p>For a new game I'd need to update the variable to something like </p>
  
  <pre><code>const game2 = new Game();
  </code></pre>
  
  <p>and update that reference in the event listener accordingly.</p>
  
  <p>How can I update the variable and the associated event listener code? </p>
  
  <p>If I was building this game in a traditional, procedural style without explicit classes and methods then I'd probably just create a function to wipe the accumulated data clean and start over but it seems like it should be easier to create a new class, despite the fact that doing it dynamically is proving difficult.</p>