如何使用JavaScript创建4张卡片？

Question

我有一张卡片，我使用HTML对其进行硬编码，而不是复制和粘贴几次，我喜欢使用JavaScript进行操作。这是我到目前为止所没有的，但无济于事。

const portfolio = document.querySelector('.portfolio');
const box = document.getElementById('box');
const imgPlaceholder = document.querySelector('.design-img');

for (let i = 0; i < 3; i++) {
  box.getAttribute('id', 'box');
  portfolio.appendChild(box);

  console.log(box);
}

我用过循环，但没有显示我想要的循环。我假设卡开始堆叠，看一下我的代码笔：https://codepen.io/Paiz27/pen/wbRyVW

我正在尝试使用JavaScript来实现这一目标。