Load more data from json on click

const friendAndFamily = [{
    name: "Serena Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Tom Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "George Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Leon Gosling",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Dominic Macklin",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Ollie Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Jack Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Davide Wilkins",
    supporterNumber: "0123456789",
    isStrongRelationship: true,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  },
  {
    name: "Murilo Whipday",
    supporterNumber: "0123456789",
    isStrongRelationship: false,
    ticketingPoints: "2,500 Ticket Points",
    thumbnailUrl: "https://i.pravatar.cc/100"
  }
];

//create chunks from the above dataset
function createChunksFromArray(array, length) {
  var chunks = [], i = 0, n = array.length;
  while (i < n) {
    chunks.push(array.slice(i, i += length));
  }
  return chunks;
}

//as you said, you want to get 2 items from the list, so chunk length would be 2
const chunkLength = 2;
//the default chunk index as for getting 4 items initially
let currentChunkIndex = 1;
const chunks = createChunksFromArray(friendAndFamily, chunkLength);


function getFriendAndFamilyData(supporter) {


  const {
    thumbnailUrl,
    name,
    isStrongRelationship,
    supporterNumber,
    ticketingPoints
  } = supporter;

  // check if the boleen above returns true or false
  const relationship = isStrongRelationship ?
    '<i class="supporter__relationship">Strong relationship</i>' :
    '<i class="is-d-none">Not a strong relationship</i>';

  return `
      <div class="supporter">
      <h4 class="supporter__name">
        <span class="supporter__thumbnail"><img src="${thumbnailUrl}"></span>
          ${name}
          ${relationship} 
          <span class="supporter__number">(${supporterNumber})</span>
        </h4>
        <span class="supporter__points">${ticketingPoints}</span>
      </div>
    `;
}


//GRAB THE ID HERE
document.querySelector("#rmFriendsAndRelativesContent").innerHTML =
  `
    <h5>My Friends & Family (${friendAndFamily.length} results)</h5>
    <div id="data-list">${[...chunks[0], ...chunks[1]].map(getFriendAndFamilyData).join("")}</div>
    <button class="btn-footer" type="button" aria-expanded="false" onclick="seeMore()" id="see-more-button">See more ${friendAndFamily.length - chunkLength*(currentChunkIndex + 1)}</button>
  `;
  
  //add see more event to get more items from the button click
function seeMore() {
  
  //append data to HTML
  document.querySelector("#data-list").innerHTML += chunks[currentChunkIndex].map(getFriendAndFamilyData).join("");
  
  currentChunkIndex += 1;

  const seeMoreButton = document.querySelector("#see-more-button");

  //no more chunks to get
  if(currentChunkIndex === chunks.length - 1) {
     seeMoreButton.parentNode.removeChild(seeMoreButton)
     return
  }
  
  //Update how many more on see more button
  seeMoreButton.innerHTML = `See more ${friendAndFamily.length - (currentChunkIndex + 1)*chunkLength}`
  
}

<div id="rmFriendsAndRelativesContent"></div>