How to handle an asterisk * in an id selector - php

Question

I have PHP code generating a row of buttons for the user to click, with each button corresponding to the grade of a student. The PHP also generates the jquery needed to cause a button click to randomly select a student with that grade:
echo "<div id='targetGradeButtons' class='testing'>Randomly select student with target grade: " ;
foreach ($uniquetarget as $i => $target) {
echo "<button id='target-$target'>$target</button> " ; // Generate button for randomly selecting students with certain target
// Create jquery to handle button clicks
echo "<script>
$('#target-$target').click(function(){
randomName('target', '$target');
});
</script>" ;
}
echo "</div>" ;
This works perfectly for most grades. However, it doesn't work for A* grades. The random name selector part of it works fine when I hard code A* as the grade, so the problem is with the code above failing to successfully select the #target-A* button. I believe this is because * is a special character. How can I get around this?
Using PHP functions to automatically add escape characters (backslashes), seems not to help.

Answer 1

Rather than bind a separate handler to each ID, I suggest you give them all the same class, and bind a single handler to the class. It can then get the ID from the target element.
echo "<div id='targetGradeButtons' class='testing'>Randomly select student with target grade: " ;
foreach ($uniquetarget as $i => $target) {
echo "<button id='target-$target' class='target'>$target</button> " ; // Generate button for randomly selecting students with certain target
}
echo "</div>" ;
// Create jquery to handle button clicks
echo "<script>
$('.target').click(function(){
randomName('target', this.id.split('-')[1]);
});
</script>" ;

Answer 2

You can use the Attribute Equals Selector
$('[id=\"target-$target\"')

Answer 3

You can try using exact id match selector.
$('[id="target-A*"]')
Example : https://jsfiddle.net/DinoMyte/1a6mwb13/3/