//HTML
<ul class="category-list">
    <li>食費</li>
    <li>日用品</li>
    <li>交際費</li>
    <li>本・雑誌</li>
    <li>携帯電話・インターネット</li>
    <li>医療費</li>
    <li>交通費</li>
    <li>水道・電気・ガス</li>
    <li>家賃</li>
</ul>

//CSS
.category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-list li{
  background-color: #e0e0e0;
  padding: 10px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border:none;
}
.selected{
  background-color:#9acd32!important;
  color:#fff;
}
.click-button{
  background-color: #9acd32!important;
  color: white;
  border:none;
}

const category_lists = document.querySelectorAll('.category-list li');
let select_category_flag = false;

category_lists.forEach(item => {
    item.addEventListener('click', (e) => {
        if (item.classList.contains('click-button')) {
            item.classList.remove('click-button');
            
            select_category_flag = false;
        } else if (!select_category_flag) {
            category_lists.forEach(e => e.classList.remove('click-button'));
            
            item.classList.add('click-button');
        
            select_category_flag = true;
        }
    });
});