title: When I click on the button, my prompt appears twice
body: <p>I'm doing a memory puzzle and, on click at every button, should display the prompt to the player write what number was that. When I click the first box to fill with the right number, everything works. But, when I click on the second box, the prompt appears twice, or three times if it is the third box that I clicked. What's wrong with my 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-js lang-js prettyprint-override"><code>number0 = document.getElementById('number1');
  number1 = document.getElementById('number2');
  number2 = document.getElementById('number3');
  number3 = document.getElementById('number4');
  number4 = document.getElementById('number5');
  number5 = document.getElementById('number6');
  number6 = document.getElementById('number7');
  number7 = document.getElementById('number8');
  number8 = document.getElementById('number9');
  
  elements = []
  elements.push(number0);
  elements.push(number1);
  elements.push(number2);
  elements.push(number3);
  elements.push(number4);
  elements.push(number5);
  elements.push(number6);
  elements.push(number7);
  elements.push(number8);
  
  window.addEventListener('load', insertNumbers)
  
  function insertNumbers() {
    var list = ['0', '1', '2', '3', '4', '5', '6', '7', '8']
    var shuffled = list.sort(() =&gt; Math.random() - 0.5)
    console.log(shuffled)
  
    number0.textContent = shuffled[0]
    number1.textContent = shuffled[1]
    number2.textContent = shuffled[2]
    number3.textContent = shuffled[3]
    number4.textContent = shuffled[4]
    number5.textContent = shuffled[5]
    number6.textContent = shuffled[6]
    number7.textContent = shuffled[7]
    number8.textContent = shuffled[8]
  
    setTimeout(function() {
      number0.textContent = '*'
      number1.textContent = '*'
      number2.textContent = '*'
      number3.textContent = '*'
      number4.textContent = '*'
      number5.textContent = '*'
      number6.textContent = '*'
      number7.textContent = '*'
      number8.textContent = '*'
      analiseNumbers()
    }, 2000)
  
    var spans = ['*', '*', '*', '*', '*', '*', '*', '*', '*']
  
    function analiseNumbers() {
      console.log(elements)
  
      number0.addEventListener('click', function() {
        i = number0;
        runApp()
      })
      number1.addEventListener('click', function() {
        i = number1;
        runApp()
      })
      number2.addEventListener('click', function() {
        i = number2;
        runApp()
      })
      number3.addEventListener('click', function() {
        i = number3;
        runApp()
      })
      number4.addEventListener('click', function() {
        i = number4;
        runApp()
      })
      number5.addEventListener('click', function() {
        i = number5;
        runApp()
      })
      number6.addEventListener('click', function() {
        i = number6;
        runApp()
      })
      number7.addEventListener('click', function() {
        i = number7;
        runApp()
      })
      number8.addEventListener('click', function() {
        i = number8;
        runApp()
      })
  
      function runApp() {
        var position = elements.indexOf(i)
        var chute = prompt('Qual número estava aqui?')
        if (chute === shuffled[position]) {
          i.textContent = chute;
          spans.push(chute)
          spans.sort().reverse().pop()
          console.log(spans)
          if (spans.indexOf('*') == -1) {
            alert('YOU WON!')
          } else {
            analiseNumbers()
          }
        }
        if (chute !== shuffled[position]) {
          alert('Erro!')
          insertNumbers()
        }
      }
  
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin           : 3% 0%;
    margin-left      : -3%;
    padding          : 0%;
    box-sizing       : border-box;
    }
  body {
    justify-content  : center;
    align-items      : center;
    display          : flex;
    flex-direction   : column;
    background-color : #1c1c1c;
    color            : #eaeaea;
    }
  .row1 {
    display          : flex;
    flex-direction   : row;
    }
  .row2 {
    display          : flex;
    flex-direction   : row;
    }
  .row3 {
    display          : flex;
    flex-direction   : row;
    }
  .number {
    height           : 40px;
    padding          : 10px 15px;
    border           : 2px solid #eaeaea;
    border-radius    : 12px;
    margin           : 15%;
    transition       : all 0.3s ease;
    cursor           : pointer;
    }
  .number:hover {
    background-color : #eaeaea;
    color            : #1c1c1c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
    &lt;div class="row1"&gt;
      &lt;span class="number" id='number1'&gt;&lt;/span&gt;
      &lt;span class="number" id='number2'&gt;&lt;/span&gt;
      &lt;span class="number" id='number3'&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="row2"&gt;
      &lt;span class="number" id='number4'&gt;&lt;/span&gt;
      &lt;span class="number" id='number5'&gt;&lt;/span&gt;
      &lt;span class="number" id='number6'&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="row3"&gt;
      &lt;span class="number" id='number7'&gt;&lt;/span&gt;
      &lt;span class="number" id='number8'&gt;&lt;/span&gt;
      &lt;span class="number" id='number9'&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks for the help, anyways.</p>