title: Something like TIC TAC TOE in JavaScript
body: <p>I was thinking to do a simple tic tac toe game, but instead of adding X and 0, I was thinking when a square is clicked, that square should become red, then next click on another square to make it blue.</p>
  <p>All was ok, until the squares turn only into red when I click on them and on next click they don't became blue. I tried different ways, without success.
  Finally I wrote the code like so, to be very clear that after .red class was added on the div that was clicked, the value of current player should change, and then because it changed, on next click to add the .blue class on clicked div. But it's becoming red, not blue. What should I do, so on next click the div should turn into blue? Thanks</p>
  <pre><code>let score=0
  let blue ='blue',red = 'red'
  let currentPlayer = red
  
  
  
  const cells = [] // to keep all cell to iterate over them
  
  
    for(let i=0;i&lt;9;i++){
      const divCell = document.createElement('div')
      divCell.setAttribute('class', 'cell')
      divCell.setAttribute('id', i)
      gridWrapper.appendChild(divCell)
      cells.push(divCell)
  
  }
  
  
  cells.forEach( cell =&gt; {
      cell.addEventListener('click', (e)=&gt; {
         let id = e.currentTarget.id
          if(!cells.id &amp;&amp; currentPlayer === red){
              cells[id] = currentPlayer
              e.target.classList.add('red') 
              currentPlayer = blue
              console.log(currentPlayer);
           } 
          if(!cells.id &amp;&amp; currentPlayer === blue){
              cells[id] = currentPlayer
              e.target.classList.add('blue') 
              currentPlayer = red
              console.log(currentPlayer);
  
          }
         
      })
  })```
  </code></pre>