изменение стиля точек на слайде изображений с помощью javascript

Question

У меня есть набор из трех точек, которые должны менять стиль, когда он является текущей точкой, поэтому он станет темнее других, и решение, которое я нашел, работает, но я не понимаю, почему оно не работает должным образом. У меня есть другие способы сделать это в Google, но сейчас я пытаюсь понять, почему код, который я написал, работает забавным образом

код здесь https://codepen.io/mullerz/pen/RwWVPJN

        <button class="botao current"></button>
        <button class="botao"></button>
        <button class="botao"></button>
    </div>

JS
dots.forEach(function(el, index){

    el.addEventListener("click",function(){

        const esta = this;
        const target = newdots.findIndex(function(num){
            return num === esta;
        })

        slides.style.transform = "translateX(" + ( - size * target) + "px";
        slides.style.transition = "transform .5s";

        document.querySelector(".current").classList.remove("current");
        this.classList.add("current");

    })
})

Спасибо за миллион