Question

Got a bunch of letter buttons in code below:

Code:

<?php
    $a = range("A","Z");
?>

<table id="answerSection">
    <tr>

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

Now the code below is able to turn on an answer button:

Code:

function addwindow(btn) { 
$('#answer'+btn).addClass("answerBtnsOn");
}

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 look for button "#answerB" and turn on that button which is button B. or if the “Answer” is E, then it will look for button "#answerE" and turn on that button which is button E.

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. This is because it is trying to find button "#answerBE" which is incorrect, it should be looking for button "#answerB" and button "#answerE" and turn them both on.

Another example is if “Answer” is A D F, it doesn’t turn on buttons A D and F because it is trying to find button "#answerADF" which is incorrect, it should be looking for button "#answerA", button "#answerD", and button "#answerF" and turn them all on.

So my question is that how can I turn on multiple buttons if there are multiple Answers? Do I need to put all the buttons in an array and loop through them so that it is able to go through all the buttons and turn on those buttons which should be turn on?

UPDATE:

Below is the “Add” button which calls on the addwindow() function and above the add button is the “Answer” column where it displays rows of Answers

   echo '<td class="noofanswerstd">'.htmlspecialchars($searchNoofAnswers[$key]).'</td>';
    echo "<td class='addtd'><button type='button' class='add' onclick=\"parent.addwindow('$searchAnswer[$key]');\">Add</button></td></tr>";

Answer 1

I believe,you need this:

function addwindow(btn) { 
    var answers = $.map(btn.split(''),function(chr){   return "#answer"+chr;  }).join(', ');
    $(answers).addClass("answerBtnsOn");
}

Explanation:

btn.split('')   //splits btn string into char's array, 
                //  e.g. "ADE" will become ["A","D","E"]
$.map           //converts ["A","D","E"] 
                //  to ["#answerA","#answerD","#answerE"]
join(',')       //makes "#answerA, #answerD, #answerE" string 
                //  from ["#answerA","#answerD","#answerE"] array