title: How to add and remove a class when you click on the element
body: <p>Without using JQUERY I need to be able to change the css class on a div in a table. The following link will show you what the table looks like <a href="https://jsfiddle.net/7gwktgxz/" rel="nofollow">https://jsfiddle.net/7gwktgxz/</a></p>
  
  <p>I need to be able to click on a space and it removes the last element of the class, and adds a new one. I need to be able to get the id of the div and change the class of that div (or something similar to that)</p>
  
  <p><strong>Here is the HTML</strong></p>
  
  <pre><code>&lt;table class="othello-board" cellspacing="0"&gt;
          &lt;tr class="base white"&gt;
              &lt;th colspan="8"&gt;
                  &lt;div class="base-pieces-wrapper"&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                      &lt;div class="base-piece white"&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-1-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-1-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-2-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-2-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-3-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-3-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-3-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-4-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-4-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-4-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-4-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-4-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-4-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-4-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-4-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-5-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-5-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-5-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-5-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece white" id="tile-5-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-5-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-5-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-5-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-6-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece black" id="tile-6-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-6-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-7-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="game-row"&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-1"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-2"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-3"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-4"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-5"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-6"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-7"&gt; &lt;/div&gt; &lt;/td&gt;
              &lt;td&gt; &lt;div class="othello-piece none" id="tile-8-8"&gt; &lt;/div&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="base black"&gt;
              &lt;th colspan="8"&gt;
                  &lt;div class="base-pieces-wrapper"&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                      &lt;div class="base-piece black"&gt; &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>