title: I am trying to apply filter:brightness in JavaScript to a bunch of image elements
body: <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>var brightness = document.getElementById("brightness");
  
  trash.addEventListener("click", function() {
    brightness.style.filter = "brightness(100%)";
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"&gt;
  
  &lt;div id="trash"&gt;
    &lt;i class="fas fa-trash"&gt;&lt;/i&gt;
  &lt;/div&gt;
  
  &lt;img src="imgs/utensil.svg" alt="utensil" id="utensil" id="brightness"&gt;
  &lt;img src="imgs/straw.svg" alt="straw" id="straw" id="brightness"&gt;
  &lt;img src="imgs/chipbag.svg" alt="chip bag" id="chip_bag" id="brightness"&gt;
  &lt;img src="imgs/garbagebag.svg" alt="garbage bag" id="g_bag" id="brightness"&gt;
  &lt;img src="imgs/eggs.svg" alt="eggs container" id="egg_container" id="brightness"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hi, I am sorry that I have to embed a series of svg files that do not exist. Is there any way to apply brightness through clicking the trash can icon to all 4 images without having to assign every img's id (untesil.style.filter = "brightness(100%);..and so on)? I made the second unified id, which is "brightness" but it does not seem to work. </p>