adding and removing class is not working correctly
<p>I have a php code where it displays buttons from A-Z:</p>

<pre><code>  &lt;table id="optionAndAnswer" class="optionAndAnswer"&gt;
    &lt;tr class="answer"&gt;
    &lt;td&gt;3. Answer&lt;/td&gt;
    &lt;td&gt;
        &lt;?php
            $a = range("A","Z");
        ?&gt;

        &lt;table id="answerSection"&gt;
            &lt;tr&gt;

        &lt;?php
            $i = 1;
            foreach($a as $key =&gt; $val){
                if($i%7 == 1) echo"&lt;tr&gt;&lt;td&gt;";
                echo"&lt;input type=\"button\" onclick=\"btnclick(this);\" value=\"$val\" id=\"answer".$val."\" name=\"answer".$val."Name\" class=\"answerBtns answers answerBtnsOff\"&gt;";      
                if($i%7 == 0) echo"&lt;/td&gt;&lt;/tr&gt;";
                $i++;
            }
        ?&gt;

...
</code></pre>

<p>Now these buttons should turn on and turn off using ".answerBtnsOn" and ".answerBtnsOff"</p>

<p>The problem I have is that it highlights the buttons which should be turned on, but it doesn't unhighlight (turn off) the other buttons. So if button B was highlighted but now the answer is A and C, it should turn on only buttons A and C and all other buttons should be turned off but this doesn't happen as button B is still turned on along with A and C.</p>

<p>So my question is that how can I turn off the buttons that should turned off. At the moment it is turning on the correct buttons but not turning off the other buttons.</p>

<p>Below is current code:</p>

<pre><code>var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', ');

        $(answers).removeClass('answerBtnsOn').addClass('answerBtnsOff');
        $(answers).addClass("answerBtnsOn").siblings().addClass('answerBtnsOff');
</code></pre>

<p>UPDATE:</p>

<p>Here is a <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text12.php" rel="nofollow">DEMO</a> so you can see what is happening, pease follow the steps below in order to use the demo:</p>

<ul>
<li>Step 1: On the left hand side you will see a green plus button, click
on this button and a modal window will appear.</li>
<li>Step 2: In the search bar in the modal window you will see a search
bar, type in "AAA" and submit.</li>
<li>Step 3: You will see a bunch of results appear for you search. In the
first row you will see an "Answer" column which states "B" under that
column within that first row. Click on the "Add" button to add that
row.</li>
<li>Step 4: You will now see on the right hand side, the button "B" is
highlighted.</li>
</ul>

<p>This is fine at moment, but the problem is now coming up:</p>

<ul>
<li>Step 5: Click on the green plus button again in the row and perform
the same search.</li>
<li>Step 6: This time add the second row where the "Answer" is "A C". Now
as you can see the buttons A and C are highlighted but button B is
still highlighted, it should be turned off.</li>
</ul>

<p>So that is my problem, in this example why doesn't button "B" turn off as it is now not the answer?</p>
