Set waypoints on multipule elements

I have a div tag with the class "dipper"

<div class = "dipper">
<p>Peekaboo</p>
</div>

I then have this script to show "dipper" when the scroll is at a certion part of the page.

<script type="text/javascript">

    var $dipper = $('.dipper');

    $dipper.waypoint(function (direction) {
        if (direction == 'down') {

        $dipper.addClass('js-dipper-animate');
    }

    else{

        $dipper.removeClass('js-dipper-animate');
    }

    }, { offset: '75%' });



</script>

I then have this css that fades in "dipper"

.dipper {

opacity: 0;
transition: all 200ms ease-in;
}

.js-dipper-animate {

opacity: 1;
}

I would like to add another div under the first one that has the same effect.

The fist div would show up when the scoll is to a certian part of the screen.

Then when the first div is near the end the second div would fade in while the first remains.

I found the answer here

<script type="text/javascript">
$(document).ready(function(){
//set a waypoint for all the page parts on the page
var ppWaypoint = $('.dipper').waypoint(function(direction) {
    //check the direction
    if(direction == 'down') {
        //add the class to start the animation
        $(this.element).addClass('show');
        //then destroy this waypoint, we don't need it anymore
        this.destroy();
    }

}, {
    //Set the offset
    offset: '75%'
});
});