title: Escape Double Underscore and $ symbol with vanilla javascript using querySelectorAll
body: <p>I'm trying to target certain HTML tags generated by a framework, basically I'm trying to aim for the attributes and their values but since the framework auto generate them they have really weird naming. I can't target classes because there are multiple tags with the same class names.</p>
  <p>In order to target this element:</p>
  <pre><code>&lt;div class=&quot;jx_ui_html_div&quot; __jx__id=&quot;___$_90__nav_bar&quot;&gt;
  </code></pre>
  <p>I'm trying:</p>
  <pre><code>let chatNavBar = document.querySelectorAll('[__jx__id=&quot;___$_90__nav_bar&quot;]')
  </code></pre>
  <p>When I console log &quot;chatNavBar&quot; I'm getting and empty object.</p>
  <p>I know that i have to escape some characters on the attribute value and name but I just can't figure out how, any help will be really appreciate it.</p>
  <p>Here's a snippet of what I'm trying to aim here:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let chatNavBar = document.querySelectorAll('[__jx__id="___$_90__nav_bar"]')
  console.log("Selected Element:" + '' + JSON.stringify(chatNavBar))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="jx_ui_html_div" __jx__id="___$_90__nav_bar"&gt;
     &lt;p&gt;Hellow World&lt;/p&gt;
  &lt;div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Or on <a href="https://codepen.io/lowtrux/pen/mdVxNOV" rel="nofollow noreferrer">CodePen</a></p>