Cant get addClass and removeClass to work properly, creating the "15 game" <p>I'm trying to code "the 15 game" using jquery in html, <a href="https://en.wikipedia.org/wiki/15_puzzle" rel="nofollow">See this page</a>. The game is about to get a table of "boxes" in order from 1-15. </p> <p>My code:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Insert numbers from 1 to arraysize function insertElements(myArr, arraysize){ for (var i = 1; i &lt; arraysize; i++ ) { myArr.push(i); } } // Check if the two cells is in range function canMove(col, row, empty_row, empty_col){ if((row == empty_row+1) &amp;&amp; (col == empty_col) || (row == empty_row-1) &amp;&amp; (col == empty_col) || (row == empty_row) &amp;&amp; (col == empty_col+1) || (row == empty_row) &amp;&amp; (col == empty_col-1)){ return true; } else return false; } // Swap elements in array function swapElements(myArr, indexA, indexB){ // Check bounds if((indexA &gt; myArr.length) || (indexA &lt; 0) || (indexB &gt; myArr.length) || (indexB &lt; 0)) { alert("Out of bounds"); } else{ var temp = myArr[indexA]; myArr[indexA] = myArr[indexB]; myArr[indexB] = temp; } } // Wait for the page to finish loading $(document).ready(function(){ // Create array var myArr = []; var arraysize = 17; var lastelement = arraysize-1; var empty_row; var empty_col; var empty_cell; var col; var row; var nonempty_cell; // Insert the elements insertElements(myArr, arraysize); // Number of shuffles var shuffleNum = 10000; // Shuffle the array for (var i = 0; i &lt; shuffleNum; i++ ) { var f = Math.floor((Math.random()*16)+0); var s = Math.floor((Math.random()*16)+0); swapElements(myArr, f, s); } //printarray(myArr, myArr.length); i = 0; // For each td in the table $(".maincontainer td").each(function() { // Get the radnom value from the array val = myArr[i]; // If the value is the last element // assign this cell to emptycell and add the class empty if(val == lastelement) { empty_cell = $(this); empty_cell.addClass("empty"); empty_row = this.parentNode.rowIndex; empty_col = this.cellIndex; } // Else, assign the value val to its text and add the class nonempty to it else { $(this).text(val); $(this).addClass("nonempty"); } ++i; }); // If one of the nonempty boxes is clicked $(".nonempty").click(function(){ // assign the cell that has been clicked to nonempty cell nonempty_cell = $(this); row = this.parentNode.rowIndex; col = this.cellIndex; // If the cell is in range of the empty cell if(canMove(col, row, empty_row, empty_col)){ // Swap empty cell and the non emptycell clicked var temp = empty_cell; empty_cell = nonempty_cell; nonempty_cell = temp; // Swap coordinates var temprow = row; row = empty_row; empty_row = temprow; var tempcol = col; col = empty_col; empty_col = tempcol; // Get text from the old empty cell var new_value = $(empty_cell).text(); // Assign the value to the nonempty cell text and change class to nonempty $(nonempty_cell).text(new_value); $(nonempty_cell).removeClass("empty").addClass("nonempty"); // "Erase" the textstring and change class to empty $(empty_cell).removeClass("nonempty").addClass("empty"); $(empty_cell).text(""); } else { alert("Cant move!"); } }); $(".empty").click(function(){ alert("Clicked empty cell!"); }); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html lang='sv'&gt; &lt;head&gt; &lt;meta charset="UTF-8" &gt; &lt;title&gt;The 15 game&lt;/title&gt; &lt;style&gt; .maincontainer { width: 35%; border: 10px solid black; } .maincontainer td { width: 100px; height: 100px; text-align: center; font-size: 100px; border: 3px solid black; } .nonempty { background-color: red; } .empty { background-color: #C0C0C0; } .nonempty:hover { border: 3px solid white; } &lt;/style&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; &lt;!-- External javascript with the game --&gt; &lt;script type="text/javascript" src="javascript/15game.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- Table which is the maincontainer of the 16 boxes --&gt; &lt;table class="maincontainer" &gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p> <p>The code is kind of working correctly. When I click on a cell that is in range of the empty cell, the two cells are being swapped. The only problem is that the cell that first is assigned the class "empty" seems to keep the class "empty" when I try to replace its class to the class "nonempty".</p> <p>I'm sorry for any typos, english is not my first language. Thanks for any help!</p>