SO-66726258

by David Thomas

HTML

<button type="button">Add another item</button>
<div class="container">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

CSS

,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.item {
  flex: 1 0 calc(20% - 0.5em);
}

/* irrelevant, purely for aesthetics */

*,
::before,
::after {
  line-height: 2em;
}

.container {
  border: 1px solid #000;
  counter-reset: itemCount;
  width: 90vw;
  margin-inline: auto;
}

.item {
  background-color: lightblue;
  flex: 1 0 calc(20% - 0.5em);
}

.item:nth-child(odd) {
  background-color: palegreen;
}

.item::before {
  content: counter(itemCount, decimal-leading-zero);
  counter-increment: itemCount;
}

JavaScript

const button = document.querySelector('button'),

  addMore = () => {
    let base = document.querySelector('.item');
    document.querySelector('.container').append(base.cloneNode(true));
  }
button.addEventListener('click', addMore);