arrays - how to add dynamically multiple posts with jsonplaceholder

Question

help me please, I display the html markup of 6 posts, the first click works correctly, the second click I display the same posts. how should I add six new posts, and so every time I click? I don't know what can be used instead of the slice method. demo https://jsfiddle.net/u9zc7p5v/13/

  const content = mrd.map(function(data, elem) {    
  return `
    <div class="blog__item">
      <h2 class="blog__item-title">
        ${data.title}
      </h2>
      <input type="checkbox" class="read-more-state" id="post-${elem}" />
      <p class="blog__item-text">
        ${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
      </p>
      <label for="post-${elem}" class="blog__item-toggle" >Read More</label>
      <div>${elem}</div>
    </div>
  `
  }).slice(startNum, endNum).join('');

Answer 1

Increase the startNum value startNum+=6. then in slice function do startNum + endNum.

$(function(){
          const blogs = document.querySelector('.blog__items')
          const moreBtn = document.querySelector('.blog-btn')
          let startNum = 0;
          let endNum = 6;
          async function getContent() {
            
            let responce = await fetch('https://jsonplaceholder.typicode.com/posts');
            let data = await responce.json();
            return data;
        
          }
        
          $(moreBtn).on('click', async function(e) {
            let mrd = await getContent();
                console.log(mrd.length)
            const content = mrd.map(function(data, elem) {  
              return `
                <div class="blog__item">
                  <h2 class="blog__item-title">
                    ${data.title}
                  </h2>
               
                  <p class="blog__item-text">
                    ${data.body} <span class="blog__item-more">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem itaque ducimus unde harum vitae quam provident. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta sapiente odit laborum tempore sed quaerat a aliquam? Corrupti dolorum, tempora iste qui modi consectetur explicabo quia vel reiciendis nesciunt? Id!</span>
                  </p>
                  <label class="blog__item-toggle" >Read More</label>
                  <div>${elem}</div>
                </div>
              `
              }).slice(startNum, startNum+endNum).join('');
                    console.log(startNum)
            const el = $(content);
            $(blogs).append(el)
            el.on('click', function() {
        
            });
           startNum+= 6
          });
    
    });