How to do Button Group selected and change color?

Question

I need to design buttons (I'm using bootstrap) in the Blazor project. I have 2 button groups on one Razor page. 3 to 4 buttons in each group. I want to use Javascript to change the color button which is onclick function.

1. User will click any button from group 1 (when clicking change color to green) and click the button from group 2 without deselecting button from group 1.

2. The onclick call need to be here <div class="btn-group"> because I already have onclick on my button<button type="button" class="btn btn-primary" @onclick="() => UpdateTheChart(13)">@Language.T37</button>

I have tried :focus in CSS but only 1 button can be select. This is my code, I take out the onclick in button for test purposes.

.btn:hover {
  font-weight: bold;
  color: white;
  /*green*/
  background-color: #85c995;
}

<div class="row">
  <div class="column" style="width:30%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary" style="outline-color:red; ">Sunday</button>
      <button type="button" class="btn btn-primary">Tuesday</button>
      <button type="button" class="btn btn-primary">Friday</button>
    </div>
  </div>
  <div class="column" style="width:70%">
    <div class="btn-group">
      <button type="button" class="btn btn-primary">9 am</button>
      <button type="button" class="btn btn-primary">2 pm</button>
      <button type="button" class="btn btn-primary">5 pm</button>
      <button type="button" class="btn btn-primary">8 pm</button>
    </div>
  </div>
</div>

Answer 1

function switch_to_green(el){

  //Check clicked button is on the same group
  if(el.parentElement.getAttribute("data-group") == 1){
  //Get all buttons of group 1
  let g1_buttons = document.querySelectorAll('#group1 .btn');
  for(let i =0; i<g1_buttons.length;i++){
    //Remove green color from unselected buttons
    g1_buttons[i].classList.remove('green');
  }
  }else{
  //Get all buttons of group 2
  let g2_buttons = document.querySelectorAll('#group2 .btn');
  for(let i =0; i<g2_buttons.length;i++){
    //Remove green color from unselected buttons
    g2_buttons[i].classList.remove('green');
  }
  }
  //Add green color to the only selected one
  el.classList.add('green');

}

.btn:hover {
        font-weight: bold;
        color: white;
        /*green*/
        background-color: #85c995;
}
.btn.green{
    color: white;
    /*green*/
    background-color: #85c995;
}

<div class="row">
    <div class="column" style="width:30%">
        <div class="btn-group" id="group1" data-group="1">
            <button type="button" class="btn btn-primary" style="outline-color:red; " onclick="switch_to_green(this)">Sunday</button>
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Tuesday</button>
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">Friday</button>
        </div>
    </div>
    <div class="column" style="width:70%">
        <div class="btn-group" id="group2" data-group="2">
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">9 am</button>
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">2 pm</button>
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">5 pm</button>
            <button type="button" class="btn btn-primary" onclick="switch_to_green(this)">8 pm</button>
        </div>
    </div>
</div>