How to do Button Group selected and change color?

I need to design buttons (I'm using bootstrap) in 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" id="button3" class="button1 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 purpose.

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

<div class="row">      <div class="column" style="width:30%">          <div class="btn-group" id="btn-group-a">              <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>

https://stackoverflow.com/questions/66631511/how-to-do-button-group-selected-and-change-color March 15, 2021 at 10:07AM