Access element common to each page in Dom

Access element common to each page in Dom

I'm sure someone will know this. But this keeps biting me not being too experience with

Lets say I have a site with 5 pages each generated from a base template that has a <div> in it. I transition from one page to the next my swiping.

So each page has a div like

<div id="mydiv" class="specialdiv">

If I understand correctly I will have five mydiv's in the dom when all the pages load.
I want to do something like change the content of this div on page show or create events.
How do I access the div on that page ?

I have tried things like 

$(document).on('pagecontainerbeforeshow', function() {
      var element = $(this).find('.mydiv');

However, as I go to new pages the "element" variable above is a collection of all the divs on the five pages. 

What's the best practice for accessing the particular div on the currently show page ?
I could set a unique id for each div but not sure how I would know the unique id in the event handler.

Hope that makes some sense.