Как загружать на страницу посты с одинаковым id?

Question

[jeka-3]

Как загружать на страницу посты с одинаковым id по клике на кнопку: сначала должны быть видны посты с id 1, кликнули, id 1, id 2; ещё раз кликнули id 1, id 2, id 3.
Html:

<div class="container">
    <div style="margin: 20px 0">
        <button id="btn">Get post</button>
    </div>
    <div class="card__wrap">

    </div>    
</div>

JS:

let data = [
  {
    "id": 1,
    "name": "Пост 1"
  },
  {
    "id": 1,
    "name": "Пост 2"
  },
  {
    "id": 2,
    "name": "Пост 3"
  },
  {
    "id": 1,
    "name": "Пост 4"
  },
  {
    "id": 3,
    "name": "Пост 5"
  },
  {
    "id": 2,
    "name": "Пост 6"
  }, 
  {
    "id": 3,
    "name": "Пост 7"
  },
]

data.forEach(({ id, name }) => {
  users[`${name}`] = { id, name };
  list.innerHTML += `
    <li class="user-item">${name} | ${id}</li>  `
})

Финальный результат должен быть вот такой:

<div class="card__wrap">
  <ul id="1">
    <li>Пост 1</li>
    <li>Пост 2</li>
    <li>Пост 4</li>
  </ul>
  <ul id="2">
    <li>Пост 3</li>
    <li>Пост 6</li>
  </ul>
  <ul id="3">
    <li>Пост 7</li>
  </ul>
</div>

Answer 1

[0xD34F]

const groupedPosts = Object.values(data.reduce((acc, n) => (
  (acc[n.id] ??= []).push(n),
  acc
), {}));

const button = document.querySelector('button');
button.addEventListener('click', showPosts);

const SHOW_POSTS_GROUPS = 2;
for (let i = 0; i < SHOW_POSTS_GROUPS; i++) {
  showPosts();
}

function showPosts() {
  const posts = groupedPosts.shift();
  if (posts) {
    const html = `<ul>${posts.map(n => `<li>${n.name}</li>`).join('')}</ul>`;
    document.querySelector('.card__wrap').insertAdjacentHTML('beforeend', html);
    button.disabled = !groupedPosts.length;
  }
}

Comments

[jeka-3]

0xD34F как сделать чтобы 1 и 2 id сразу были загружены на страницу? А остальные уже подгружать по клику.

[0xD34F]

Подумайте.

[jeka-3]

0xD34F, ну 1 id понятно как вывести, через функцию, а вот чтобы 1 и 2 был пока не понятно

[0xD34F]

Обновил ответ.