Use # symbol in document.querySelector() field

Question

I'm developing a musical web app using Javascript and the library Tonal.js

Using Tonal.js i'll get (for example) the notes of a chord in american notation, which corresponds to letters from A to G.

As everyone knows flat notes are represented by b symbol, while sharp notes by # (for example Ab and G#)

I've already implemented a code that works fine in order to retrieve the notes from my html elements:

1) Html:

  <div id="pad">
    <ol class="even first">
      <li class='hex C' ><div class="note">C2</div></li>
      <li class='hex G' ><div class="note">G2</div></li>
      <li class='hex Db'><div class="note">Db3</div></li>
      <li class='hex A#'><div class="note">A#3</div></li>
      <li class='hex E' ><div class="note">E4</div></li>
    </ol>  
 </div>

2) javascript:

   full_chord = "CMaj7"
   chord_notes = Tonal.Chord.notes(full_chord);//takes a signature of a chord and returns the single notes that compose the chord
   var selected_notes = chord_notes.map(title => document.querySelectorAll("."+title)); //returns the html elements with the chord notes

This works fine, until i pass a note with a # in its signature. For example:

document.querySelectorAll(".C")); //works
document.querySelectorAll(".Cb")); //works
document.querySelectorAll(".C#")); //error: invalid selector 

Is there a way to use the # symbol in my selector? Unfortunately i have to use it since it's a musical application.