title: Load more button using Javascript
body: <p>I am trying to implement a &quot;Load more&quot; button in order to display 12 posts and then an additional 12 posts after every time the load more button are clicked.</p>
  <p>The button works fine, but I am not sure what to do in order for it to start off with displaying 12 posts, as it starts with only 2 posts and then displays 12 more with every click.</p>
  <p>Please find the code below:</p>
  <p>HTML (with Twig):</p>
  <pre><code>  &lt;div class=&quot;list&quot;&gt;
        {% for post in posts %}
            &lt;div class=&quot;list-element&quot;&gt;
                &lt;div class=&quot;product&quot;&gt;
                    {{ post.location }}
                &lt;/div&gt;
            &lt;/div&gt;
        {% endfor %}
  &lt;/div&gt;
  
  &lt;!-- Load More Button --&gt;
  &lt;button id=&quot;loadmore&quot;&gt;Load More...&lt;/button&gt;
  
  </code></pre>
  <p>CSS:</p>
  <pre><code>
  .list-element {
      perspective: 1500px;
      margin: 30px;
      margin-bottom: 60px;
      width: 380px;
      height: 375px;
      text-align: center;
      border-radius: 5px;
      -webkit-transition: 200ms ease-in-out;
      -o-transition: 200ms ease-in-out;
      transition: 200ms ease-in-out;
      -webkit-box-shadow: 0 0 15px;
      display: none;
  }
  
  .list-element .content {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
  }
  
  #loadmore {
      margin: 15px auto 0px;
      display: table;
      border: none;
      padding: 5px 10px;
      font-size: 18px;
      cursor: pointer;
      color: rgb(84, 187, 98);
      border-radius: 2px;
      background-color: #ffffff;
      border: solid 1px green;
  }
  
  .list .list-element:nth-child(1) {
      display: block;
  }
  
  .list .list-element:nth-child(2) {
      display: block;
  }
  </code></pre>
  <p>JavaScript:</p>
  <pre><code>    const loadmore = document.querySelector('#loadmore');
      let currentItems = 12;
      loadmore.addEventListener('click', (e) =&gt; {
          const elementList = [...document.querySelectorAll('.list .list-element')];
          for (let i = currentItems; i &lt; currentItems + 12; i++) {
              if (elementList[i]) {
                  elementList[i].style.display = 'block';
              }
          }
          currentItems += 12;
  
          // Load more button will be hidden after list fully loaded
          if (currentItems &gt;= elementList.length) {
              event.target.style.display = 'none';
          }
      })
  
  
  </code></pre>