посмотрите, я тоже не эксперт, но если вы хотите установить класс "активный" для нажатой кнопки, то вам следует использовать методы связывания классов в большинстве сред java-скриптов.
Дляя использую VueJs и вот как я это сделаю:
HTML Body:
<div id="myList">
<div class="bottoms_list">
<div class="One cell">
<button @click="isActive = 1" :class="{active: isActive == 1}"><span><i class="Picture"></i></span>1</button>
</div>
<div class="Two cell">
<button @click="isActive = 2" :class="{active: isActive == 2}"><span><i class="Picture"></i></span>2</button>
</div>
<div class="three cell">
<button @click="isActive = 3" :class="{active: isActive == 3}"><span><i class="Picture"></i></span>3</button>
</div>
<div class="four cell">
<button @click="isActive = 4" :class="{active: isActive == 4}"><span><i class="Picture"></i></span>4</button>
</div>
</div>
</div>
тогда ваш экземпляр Vue должен выглядеть следующим образом:
new Vue({
el: '#myList',
data: {
isActive: 0,
},
});
Вы можетеоптимизируйте этот код до одной строки, используя директиву v-for.