adding different data-id to PHP / HTML loop <p>I have created a loop to call posts so I can display posts easily on my website, however... I'm using animate.css to add animations, and a problem I'm now facing is all of these elements have the same data-id so they scroll in at the same time...</p> <p>I'm very new to PHP and so I don't know if there's a way that I can give each of the divs a different data-id so they scroll in one by one?</p> <p>Here's my code thus far;</p> <pre><code>&lt;div class="animatedParent animateOnce" data-appear-top-offset='-525' data-sequence='500' style="margin: 40px 0; text-align: center;"&gt; &lt;h2 class="animated bounceInUp" data-id='14' style="text-transform: uppercase;"&gt;Recent Events at Pontins!&lt;/h2&gt; &lt;div class="past-events"&gt; &lt;?php query_posts('cat=#&amp;posts_per_page=4'); ?&gt; &lt;?php while (have_posts()) : the_post(); ?&gt; &lt;div class="one-fourth animated bounceInLeft" data-id='15'&gt; &lt;a href="&lt;?php echo get_permalink(); ?&gt;"&gt; &lt;?php the_post_thumbnail('large_wide'); ?&gt; &lt;/a&gt; &lt;h4&gt;&lt;a href="&lt;?php echo get_permalink(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h4&gt; &lt;?php the_excerpt(); ?&gt; &lt;/div&gt; &lt;?php endwhile; ?&gt; &lt;?php wp_reset_query(); ?&gt; &lt;/div&gt; &lt;div style="clear:both;"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p><a href="http://www.stuartgreen.me.uk/pontins-events/wp-content/themes/genesis-sample/js/css3-animations.js" rel="nofollow">http://www.stuartgreen.me.uk/pontins-events/wp-content/themes/genesis-sample/js/css3-animations.js</a> here's a link to the JS (I'm using 'Jack McCourt - Animate It')</p>