1 Возьмите в цикл только колонки с карточками.
2 bootstrap .col всегда должен находиться в .row
3 У вас лишний .col

<div class="container">
    <div class="row">
        {% for item in arr %}
            <div class="col-md-4">
                <div class="card">
                    ...
                </div>
            </div>
        {% endfor %}
    </div>
</div>

Поступите проще.

Сделайте два скрытытх блока.
В одном - две кнопки.
Во втором - шесть кнопок.

По событию 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);

Тольку лучше меняйте отображение не стилями классами.