Failed to execute query selector on document, id is not a valid selector
<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>