title: How to count occurences of a class in same page, then display the actual occurence in target element
body: <p>I'm currently working on a symfony project where I need to dynamically render an html page that will be printed as a pdf document.</p>
  
  <p>For now the, process is to wrap each pdf "page" inside a div with the class "pageContainer". This class has css properties making the container matching the size of an a4 document. Each div will be generated dynamically in the end using twig conditionnal rendering.</p>
  
  <p>My problem is : I need to dynamically render the "fake page" number, and I am experiencing trouble figuring how to do so</p>
  
  <p>(TL;DR : I need to create a "fake pagination" system on a single page twig template )</p>
  
  <p>My idea would be to count the occurences of the containers with class "pageContainer" as below :</p>
  
  <pre><code>&lt;script&gt;
      var pageCount = document.querySelectorAll('.pageContainer').length;
      console.log(pageCount);
  &lt;/script&gt;
  </code></pre>
  
  <p>But then, how could I "print" the actual occurence inside the concerned container ?</p>
  
  <pre><code>&lt;div class="pageContainer"&gt;
        &lt;div class="pageContent"&gt;
  
                My content here....
  
               &lt;div&gt;page n°X&lt;/div&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="pageContainer"&gt;
         &lt;div class="pageContent"&gt;
  
                My second page here....
  
               &lt;div&gt;page n°X&lt;/div&gt; // I want to render the actual div number here
         &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>