One potential starting point could be a structure like the following:
https://example.com/unique-link
HTML
<div class="container">
<div class="section">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="section">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<div class="section">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
Javascript
document.querySelectorAll('.section').forEach((box, index) => {
box.style.order = index * 2;
});
document.querySelectorAll('.box').forEach(box => {
box.addEventListener('click', event => {
var newSection = document.createElement('div');
newSection.classList.add('section');
newSection.style.order = +event.currentTarget.parentNode.style.order + 1;
var newBox = document.createElement('div');
newBox.classList.add('box');
newSection.appendChild(newBox);
event.currentTarget.parentNode.parentNode.appendChild(newSection);
});
});
CSS
.box {
min-width: 100px;
height: 50px;
flex: 1;
border: 1px solid black;
flex-wrap: nowrap;
}
.section {
width: 350px;
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
}