Why is my CSS is not working for all my EJS loops?

Question

I have a forEach loop that loops through my seeded Mongo database. Everything is working as it should, except one of my CSS functions that come from a jQuery file. It works for the first item in my loop, and then nothing else for the rest.

I've checked if my bootstrap, popper and jQuery CDNs are in order.

Checked the __dirname is correct.

I've moved the loops around on the page to see if anything's made a difference.

HTML / EJS

<%include partials/header%>


<div class="col-lg-10 col-md-6">
  <%news.forEach(function(news) { %>

  <div id="accordion" class="accordion">
          <%news.forEach(function(news) {%>

    <div class="line">

      <div id="headingOne<%=news._id%>">

        <h5 class="mb-3"> <%=news.title%>
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
            href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
            <img class="cross" src="images/cross.png">
          </button>
        </h5>
      </div>
      <div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
        data-parent="#accordion">
        <div id="info">
          <img src="<%=news.image%>">
          <p><%=news.description%></p>
        </div>
      </div>

    </div>
          <%})%>
  </div>
<%})%>

</div>
</div>


</div>

<script type="text/javascript" src="../javascripts/news-slider.js"></script>


<%include partials/footer%>

jQuery

 $(function () {
     $('.collapse').on('hidden.bs.collapse', function (e) {
         var $card = $(this).closest('.line');
         $('html,body').animate({
             scrollTop: $card.offset().top
         }, 1000);
     });
 })



//Not working//
 $(function () {
     $('.cross').on('click', function () {
         if ($('#info').css('opacity') == 1) $('#info').css('opacity', 0);
         else $('#info').css('opacity', 1);
     });
 })

CSS

.navbar-collapse {
    transition: height 1s, opacity 0.3s;
}

#info {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

Answer 1

Jquery action only apply for first matched element, you must you '.each()' method for handle loop, and you also must use unique id for each "info" element (like @iofjuupasli comment above).

Try below code:

<%include partials/header%>


<div class="col-lg-10 col-md-6">
  <%news.forEach(function(news) { %>

  <div id="accordion" class="accordion">
          <%news.forEach(function(news, index) {%>

    <div class="line">

      <div id="headingOne<%=news._id%>">

        <h5 class="mb-3"> <%=news.title%>
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
            href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
            <img class="cross" src="images/cross.png">
          </button>
        </h5>
      </div>
      <div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
        data-parent="#accordion">
        <div id="info-<%=index%>" class="info"> <!-- add index for unique id, and add info class -->
          <img src="<%=news.image%>">
          <p><%=news.description%></p>
        </div>
      </div>

    </div>
          <%})%>
  </div>
<%})%>

</div>
</div>


</div>

<script type="text/javascript" src="../javascripts/news-slider.js"></script>


<%include partials/footer%>

Jquery:

$(function () {
    $('.cross').each(function (index) {
        $(this).on('click', function () {
            if ($('#info-' + index).css('opacity') == 1) $('#info').css('opacity', 0);
            else $('#info-' + index ).css('opacity', 1);
        });
    })
 })

Css:

.navbar-collapse {
    transition: height 1s, opacity 0.3s;
}

.info {
    opacity: 1;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}