Поступите проще.
Сделайте два скрытытх блока.
В одном - две кнопки.
Во втором - шесть кнопок.
По событию change принимайте значение option, скрывайте оба блока, и показывайте нужный.
<select id ="select">
<option value="1">2 кнопки</option>
<option value="2">5 кнопок</option>
</select>
<div id="btns-1" class="btns" style="display: none;">
<button style="background-color: #bad;">lorem</button>
<button style="background-color: #bad;">lorem</button>
</div>
<div id="btns-2" class="btns" style="display: none;">
<button style="background-color: #def;">lorem</button>
<button style="background-color: #def;">lorem</button>
<button style="background-color: #def;">lorem</button>
<button style="background-color: #def;">lorem</button>
<button style="background-color: #def;">lorem</button>
</div>
const select = document.querySelector('#select');
const handleSelectChange = e => {
let btns = document.getElementsByClassName('btns');
for (let index = 0; index < btns.length; index++) {
btns[index].style.display = 'none';
}
let value = e.target.value;
let current = document.getElementById('btns-'+value);
current.style.display = 'block';
}
select.addEventListener('change', handleSelectChange);
Тольку лучше меняйте отображение не стилями классами.
