Решил, что нужно избавиться от <div class="more"></div> в html коде и подставлять его когда это необходимо. Обернул дивом с классом "price" и что-то пошло не так.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="charset" content="utf-8">
<title>Тест</title>
<style>
.item1:nth-child(n+7) {
display: none;
}
.item2:nth-child(n+6) {
display: none;
}
.item1.active,
.item2.active {
display: block !important;
}
</style>
</head>
<body>
<section id="id-1">
<div class="price">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
</div>
</section>
<section id="id-2">
<div class="price">
<div class="item2">1</div>
<div class="item2">2</div>
<div class="item2">3</div>
<div class="item2">4</div>
<div class="item2">5</div>
<div class="item2">6</div>
<div class="item2">7</div>
<div class="item2">8</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
function test(a, n) {
$('.price').after( '<div class="more">еще1</div>' );
const c = a.join(' ');
if ($(c).length <= n) return;
const o = $('.more');
o.click(function() {
$(c).addClass('active');
o.text("");
$(o).addClass('active');
})
}
test(['#id-1', '.item1'], 6)
test(['#id-1', '.item2'], 5)
</script>
</body>
</html>