Question

I am using a Jquery file on two different article tags on the same page. These are the two different article tags,

First Article Tag,

    <article id="popupAbout" class="popupAbout"> <a id="popupAboutClose"><img src="../original/images/close.png" width="50" alt="" /></a>
  <h1>Maps of Arizona</h1>
  <div id="container">
    <div id="photo-wrapper">
        <img class="image" id="image1" src="images/Wet.jpg"  height="450px" width="800px" alt="image 1"/>
        <img class="image" id="image2" src="images/Dens.jpg" height="450px" width="800px" alt="image 2"  />
        <img class="image" id="image3" src="images/Slope.jpg" height="450px" width="800px" alt="image 3"  />

        <!-- 
        <div id="transition-container"> This effect is not needed for this demo         
        </div>
        -->

        <img id="previous-btn" src="images/left_arrow.png" alt="Previous Button" />
        <img id="next-btn" src="images/right_arrow.png" alt="Next Button" />
    </div>
  </div>  
</article>

Second Article tag,

    <article id="popupProjects" class="popupProjects"> <a id="popupProjectsClose"><img src="../original/images/close.png" width="50" alt="" /></a>
  <h1>Maps of Four States</h1>
  <div id="container">
    <div id="photo-wrapper">
        <img class="image" id="image1" src="images/3843_T_av6_4states.jpg"  height="450px" width="800px" alt="image 1"/>
        <img class="image" id="image2" src="images/4.jpg" height="450px" width="800px" alt="image 2"  />
        <img class="image" id="image3" src="images/beach6.jpg" height="450px" width="800px" alt="image 3"  />

        <!-- 
        <div id="transition-container"> This effect is not needed for this demo         
        </div>
        -->

        <img id="previous-btn" src="images/left_arrow.png" alt="Previous Button" />
        <img id="next-btn" src="images/right_arrow.png" alt="Next Button" />
    </div>
  </div>
</article>

As you can see, the tag contents are almost identical. I am using the same Fade.js on both. The first one is working fine, but the second one, i am only able to see the buttons and the image container, which is empty.

HELP!!!

Answer 1

The problem is potentially due to the fact you are reusing ids. All ids have to be unique but you are using the same ones multiple times (e.g. next-btn).

Change your jQuery to select by class instead of id and ensure that both articles contain the same classes.