how to turn on multiple buttons?
<p>Got a bunch of letter buttons in code below:</p>

<pre><code>&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;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Now the code below is able to turn on an answer button:</p>

<pre><code>$('#answer'+btn).addClass("answerBtnsOn");
</code></pre>

<p>Below is code for when "Add" button is clicked, it retrieves the "Answer" from the column:</p>

<pre><code> echo '&lt;td class="answertd"&gt;'.htmlspecialchars($searchAnswer[$key]).'&lt;/td&gt;';
echo "&lt;td class='addtd'&gt;&lt;button type='button' class='add' onclick=\"parent.addwindow('$searchAnswer[$key]');\"&gt;Add&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;";
</code></pre>

<p>Below is the code where for each button (btn), it turns on/off the buttons:</p>

<pre><code>function btnclick(btn)
{


    if ($(btn).hasClass("answerBtnsOn")) {
        $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
        return false;
    }

    if ($(btn).hasClass("answerBtnsOff")) {
        $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
        return false;
    }
} 
</code></pre>

<p>But the only problem is that the code above is only able to turn on a single answer button on only. For example if the "Answer" is B, then it will turn answer button B on which is fine, or if the "Answer" is E, it is able to turn answer button E on.</p>

<p>The problem is that if there are multiple answers. If the "Answer" is B E, then it does not turn on buttons B and E, if "Answer" is A D F, it doesn't turn on buttons A D and F.</p>

<p>So my question is that how can I turn on multiple buttons if there are multiple Answers?</p>

<p>DEMO:</p>

<p>click <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text16.php" rel="nofollow">here</a> to view the demo and please follow the steps so you can use the demo:</p>

<ul>
<li>Step 1: When you open applicaton, you see a green plus button on the
page, click on it and it will display a modal window.</li>
<li>Step 2: In modal window there is a search bar, type in "AAA" and
submit search, you will see a bunch of rows appear.</li>
<li>Step 3: In the first row, you see under "Answer" colum that the
answer is B, click on the "Add" button within this row, the modal
window will close and you will see that the answer buttons have been
displayed with the "B" button highlighted.</li>
</ul>

<p>Now this works fine but it only works for single answer, follow the steps below:</p>

<ul>
<li><p>Step 4: Click on the green plus button again and perform the same
search for "AAA";</p></li>
<li><p>Step 5: This time select a row which has multiple answers under the
"Answer" column e.g the third row has answer "A C" under the "Answer"
column. Add this row by clicking on "Add" button</p></li>
<li><p>Step 6: You will see that it displays the relevant buttons but it
doesn't turn on any of the answer buttons, "A" button and "C" button
are not highlighted green. This is the problem I am having</p></li>
</ul>

<p>UPDATE:</p>

<pre><code>//I can't use the toggle method you have mentioned because there is a suitable reason for this (long story)
    if ($(btn).hasClass("answerBtnsOn")) {
            $(btn).removeClass("answerBtnsOn").addClass("answerBtnsOff");
            return false;
        }

        if ($(btn).hasClass("answerBtnsOff")) {
            $(btn).removeClass("answerBtnsOff").addClass("answerBtnsOn");
            return false;
        }

//When "Add" button is clicked, it should turn on correct buttons
    function addwindow(condition) { 

    $('input[type=button]').each(function(){
        if (condition){
            $(this).addClass('correct');
        }
    });

    }
</code></pre>

<p>HTML code is same as html code on top of question</p>
