title: Failed to execute query selector on document, id is not a valid selector
body: <p>I'm trying to create a way to edit a bunch of comments and identify them by some id that I can generate. The errors I'm having is that there is:</p>
  
  <p>SyntaxError: Failed to execute 'querySelector' on 'Document': '#1234' is not a valid selector. However, I don't see how this is possible since I clearly have <code>id=1234</code> in the <code>&lt;p&gt;</code>. </p>
  
  <p>Additionally, there are issues where when I comment everything else and do an alert(id), this does not work for the second form and the error is that:</p>
  
  <p>TypeError: Cannot read property 'classList' of null.</p>
  
  <p>Here is it in jfiddle: <a href="https://jsfiddle.net/wafqgq0L/2/" rel="noreferrer">https://jsfiddle.net/wafqgq0L/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('.editable').addEventListener('click', function(event) {
   var index = event.target.id.indexOf('_');
  
   var id = event.target.id.substring(0,index);
   
   //actual data
   document.querySelector('#'+id).classList.add('hidden');
    
    //edit button
    document.querySelector("#"+id+"_edit").classList.add('hidden');
    
    //textarea
   document.querySelector("#"+id+"_editable").classList.remove('hidden');
    
    //save button
   document.querySelector("#"+id+"_save").classList.remove('hidden');
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//all id will be like 12345_comment
  
  &lt;div class="editable"&gt;
  &lt;p id="1234"&gt;
    Some comment
  &lt;/p&gt;
  
  &lt;form action="form.php" method="post"&gt;
    &lt;textarea id="1234_editable" class="hidden"&gt;Some comment&lt;/textarea&gt;
    &lt;a href="#" id="1234_edit"&gt;Edit&lt;/a&gt;
    &lt;a href="#" id="1234_save" class="hidden"&gt;Save&lt;/a&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;div class="editable"&gt;
  &lt;p id="123"&gt;
    Some comment
  &lt;/p&gt;
  
  &lt;form class="editable" action="form.php" method="post"&gt;
    &lt;textarea id="123_editable" class="hidden"&gt;Some comment&lt;/textarea&gt;
    &lt;a href="#" id="123_edit"&gt;Edit&lt;/a&gt;
    &lt;a href="#" id="123_save" class="hidden"&gt;Save&lt;/a&gt;
  &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>