I need the my jquery counter to reset after the last img within a div -

i need add page counter the bottom of each <div> class of page_container.

i need reset page counter 1 each div tag class of resource_container.

right code keeps counting total page_container , not reset 1 when new resource_container starts.

here jquery:

$("document").ready(function() {         buildpagebottoms('img');     });      function  buildpagebottoms(strwhichtag) {         var cpagecount = 1;          $(strwhichtag).each(function() {            $(this).after($("<div class='pagenumber'><p>page " + cpagecount++ + "</p></div>"));         });     } 

here html:

<div class="resource_container">   <div class="page_container" id="1"><img src="01a.png">    </div>   <div class="page_container" id="2"><img src="02a.png">     </div> </div>  <div class="resource_container">   <div class="page_container" id="1"><img src="01b.png">    </div>   <div class="page_container" id="2"><img src="02b.png">    </div>    </div> </div> 

js:

$("document").ready(function () {     buildpagebottoms('img', 'resource_container'); });  function buildpagebottoms(strwhichtag, strsplittertag) {     $('.' + strsplittertag).each(function () {         var cpagecount = 1;         $('.' + strsplittertag + ' > ' + strwhichtag).each(function () {             $(this).after($("<div class='pagenumber'><p>page " + cpagecount+++"</p></div>"));         });     }); }