Brand Listing

<div class="brand-listing">
    <div class="brand-listing__container">
        <h3 class="brand-listing__title">Alle Marken</h3>
        <div class="index">
            <button type="button" onclick="document.getElementById('09').scrollIntoView({behavior: 'smooth'});" class="index__button">0-9</button>
            <button type="button" onclick="document.getElementById('A').scrollIntoView({behavior: 'smooth'});" class="index__button">A</button>
            <button type="button" onclick="document.getElementById('B').scrollIntoView({behavior: 'smooth'});" class="index__button">B</button>
            <button type="button" onclick="document.getElementById('C').scrollIntoView({behavior: 'smooth'});" class="index__button">C</button>
        </div>
        <div class="brand-listing__table">
            <div class="brands-table">
                <div class="brands-table__row" id="09">
                    <div class="brands-table__index">0-9</div>
                    <div class="brands-table__links">
                        <a href="#" class="brands-table__link">3M</a>
                    </div>
                </div>
                <div class="brands-table__row" id="A">
                    <div class="brands-table__index">A</div>
                    <div class="brands-table__links">
                        <a href="#" class="brands-table__link">ABS</a>
                        <a href="#" class="brands-table__link">Achim Achilles</a>
                        <a href="#" class="brands-table__link">AKU</a>
                        <a href="#" class="brands-table__link">Assos</a>
                        <a href="#" class="brands-table__link">ALEVOR</a>
                        <a href="#" class="brands-table__link">Alpina</a>
                        <a href="#" class="brands-table__link">Asics</a>
                    </div>
                </div>
                <div class="brands-table__row" id="B">
                    <div class="brands-table__index">B</div>
                    <div class="brands-table__links">
                        <a href="#" class="brands-table__link">Babolat</a>
                        <a href="#" class="brands-table__link">BARBICIDE</a>
                        <a href="#" class="brands-table__link">BOGNER FIRE+ICE</a>
                        <a href="#" class="brands-table__link">Bolle</a>
                        <a href="#" class="brands-table__link">Backscratchers</a>
                        <a href="#" class="brands-table__link">Bergans</a>
                        <a href="#" class="brands-table__link">BLACKKYAK</a>
                    </div>
                </div>
                <div class="brands-table__row" id="C">
                    <div class="brands-table__index">C</div>
                    <div class="brands-table__links">
                        <a href="#" class="brands-table__link">Castelli</a>
                        <a href="#" class="brands-table__link">Craft</a>
                        <a href="#" class="brands-table__link">Colmar</a>
                        <a href="#" class="brands-table__link">Columbia</a>
                        <a href="#" class="brands-table__link">CMP</a>
                        <a href="#" class="brands-table__link">CEP</a>
                        <a href="#" class="brands-table__link">Chrome</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>