buttons are not being unhighlighted
<p>I hav 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>What I am trying to do is create a template for the above code in jquery so that if the user wants to add these buttons into a block, then jquery can be used to add these buttons in a block, exactly like a template.</p>

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

<pre><code>var $this, i=0, $row, $cell;
$('#optionAndAnswer .answers').each(function() {
    $this = $(this);
    if(i%7 == 0) {
        $row = $("&lt;tr/&gt;").appendTo($answer);
        $cell = $("&lt;td/&gt;").appendTo($row);
    }
    var $newBtn = $("&lt;input class='answerBtnsRow answers' type='button' style='display:%s;' onclick='btnclick(this);' /&gt;".replace('%s',$this.is(':visible')?'inline-block':'none')).attr('name', $this.attr('name')).attr('value', $this.val()).attr('class', $this.attr('class')).attr('id', $this.attr('id')+'Row');


    $newBtn.appendTo($cell);

    i++;
});
</code></pre>

<p>Now this works fine but I have one issue. I want the user to be able to highlight <code>"answerBtnsOn"</code> and unhighlight "answerBtnsOff" the buttons depending on what the letter is. </p>

<p>E.g If the letter is "B", then highlight button B and unhighlight the other buttons. If there are multiple letters such as A C, then highlight buttons A and C and unhighlight all the other buttons.</p>

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

<p>So my question is that in the code below, why isn't it unhighlighting the buttons?</p>

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

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

<p>UPDATE:</p>

<p>I have created a demo in this <a href="http://helios.hud.ac.uk/u0867587/Mobile_app/Text14.php" rel="nofollow">application</a>. Please open the url and follow the steps below in order to be able to use the demo</p>

<ul>
<li>Step 1: When you open app, click on the "Add Question" button
straight away, this will add a table row below showing the same
controls as above.</li>
<li>Step 2: Within the row you have just added, click on the "Open Grid"
link and select button "7", this will output 7 buttons from "A-G"
below.</li>
<li>Step 3: Now in the row 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 4: In the search bar in the modal window you will see a search
bar, type in "AAA" and submit.</li>
<li>Step 5: 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 6: You will now see that within your row, the button "B" is
highlighted.</li>
</ul>

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

<ul>
<li>Step 7: Click on the green plus button again in the row and perform
the same search.</li>
<li>Step 8: 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>
