javascript - Change the innerHTML of EVERY element with specified id

Question

I am trying to change the innerHTML value of every element with id 'filename', but only the first one gets updated.

My problem is that only the first element with id 'filename' is updated.

HTML code is generated as a liquid template, but I don't think it should change anything.

Here is the HTML:

  <ul>
    {% for product in products %}
      <li>
      <p>{{ product.title }}</p>
      {% for image in product.images %}
        <img src={{ image.src }} height="200px" />
        <p>1) Is your image name descriptive? {{ image.src }}</p>
        <p>2) Is your alt tag descriptive enough? {{ product.title }}</p>
        <p>3) Is your image file type JPEG? <div id="filename">{{ image.src }}</div></p>
      {% endfor %}
      </li>
      <hr>
      {% endfor %}
    </ul>

And the javascript:

<script type="text/javascript">
  $("#filename").each(function()  {
    $(this).html("ext!");
  });
</script>

Answer 1

ID's need to be unique - you should try replacing all elements with id="filename" to class="filename" instead, and then replacing #filename with .filename in your each() function, so it resembles the following:

$(".filename").each(function()  {
    $(this).html("ext!");
});