LADYX,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.wrapper-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box {
position: relative;
margin: 5px;
width: 10px;
height: 10px;
background-color: black;
}
.box.nextstop ~ .box {
display: none;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
const limit = 5;
const nextOpen = (wrapper, button) => {
const boxs = wrapper.querySelectorAll(".box"),
len = boxs.length - 2,
endBox = wrapper.querySelector(".nextstop"),
index = [...boxs].indexOf(endBox) + limit;
if(endBox) endBox.classList.remove("nextstop");
if(index < len) boxs[index].classList.add("nextstop");
else button.remove()
}
document.querySelectorAll(".wrapper-boxes").forEach(wrapper => {
const button = wrapper.nextElementSibling;
button.addEventListener("click", nextOpen.bind(null,wrapper, button));
nextOpen(wrapper, button);
})
});
</script>
</head>
<body>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
<div class="wrapper-boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<button>Ещё</button>
</body>
</html>