Изменение цвета кнопки при щелчке

$(document).ready(function() {
  all__buttons = document.querySelectorAll('.header__button');
  /*selected__button.click= function(){
        selected__button.backgroundColor='#5f3ec0';
    
  };*/

  function changeColor(inputbutton) {
    inputbutton.backgroundColor = '#5f3ec0';
  }

  [].forEach.call(all__buttons, function(selected__button) {
    selected__button.addEventListener("click", changeColor);
  });
});

body {
  margin: 0;
  padding: 0;
}

.globalcontainer {
  margin-top: 0px;
  margin-right: 15px;
  margin-bottom: 0px;
  margin-left: 15px;
}

.header>.header__text {
  position: relative;
  width: 93px;
  height: 24px;
  left: 0;
  margin-top: 129px;
  margin-bottom: 20px;
  font-family: TT Norms;
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 100%;
  /* identical to box height, or 24px */
  color: #000000;
}


/*
.header__buttons {
    left: 0;
    top: 193px;
}
*/

.header__button {
  border-radius: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="globalcontainer">
  <div class="header">
    <div class="header__text">Обзоры</div>
    <div class="header__buttons">
      <span>
        <button class="header__button">Все</button>
        <button class="header__button">Видео</button>
        <button class="header__button">Текст</button>
        <button class="header__button">Обзоры</button>
        <button class="header__button">Сравнения</button>
        <button class="header__button">Краш видео</button>
        <button class="header__button">Распаковка</button>
      </span>
    </div>
  </div>
</div>