title: How to disable a button, when there's other buttons with the same id?
body: <p>So I made a <a href="http://ShareCookie.com" rel="nofollow">site</a> for fun where anyone can post, kind of like a forum. As of now, I am working on a report button, to obviously report posts. I would like the button to be disabled after the user clicks it, to prevent extra reports in the current session. Here is my code:</p>
  
  <pre><code>{{#each posts}}
    &lt;p&gt;&lt;font color="black" size=5&gt;&lt;b&gt;{{title}} - &lt;/b&gt;&lt;/font&gt;&lt;br&gt;
    &lt;font size=5 color="gray"&gt;&lt;i&gt;by {{author}}&lt;/i&gt;&lt;/font&gt;&lt;/p&gt;
    &lt;p&gt;&lt;font color="black" size="4"&gt;{{content}}&lt;/font&gt;&lt;/p&gt;&lt;br&gt;
    &lt;a id="hides" onclick="hidefunction();"&gt;&lt;font size=4&gt;&lt;span class="glyphicon glyphicon-alert" aria-hidden="true"&gt;&lt;/span&gt;&lt;/font&gt;&lt;/a&gt;&lt;br&gt;
    &lt;font color="black"&gt;_______________________________________________________________________&lt;/font&gt;
  {{/each}}
  </code></pre>
  
  <p>I know the code is pretty unsightly, but it works. That code pulls all the posts from my database, and creates a post on the site with the information. Along with the post, it makes a report button (the glyphicon). As you can see, the report button's <code>id</code> is <code>"hides"</code>, and <code>onclick</code> calls the <code>hidefunction()</code> shown here: </p>
  
  <pre><code>&lt;script&gt;
   function hidefunction(){
    document.getElementById("hides").setAttribute("class", "disabledl");
   };
  &lt;/script&gt;
  </code></pre>
  
  <p>So, as you can see, it sets the attribute of <code>hides</code> to my hidden <code>class</code>, but as I guessed, this only hides the button on the first (most recent) post. Even if I click a different report button. Is there some way to give each button a unique <code>id</code>? So that I can hide the correct button, instead of it just hiding the most recent button created. Thanks!</p>