How to apply css only to clicked menu wehn menu click?

<div id="schedulelist" class="list-group">
         <label class="sclist" for="sclist">List</label>
         <input id="sclist" type="checkbox">
         <c:forEach items="${datelist}" var="list" varStatus="status" >
             <a href="#" class="list-group-item list-group-item-action active py-3 lh-tight"
                aria-current="true">
                 <div class="d-flex w-100 align-items-center justify-content-between">
                     <strong class="mb-1">${"Day"} ${status.count}</strong>
                     <small>${list}</small>
                 </div>
                 <div class="col-10 mb-1 small">${city.name}</div>
             </a>
         </c:forEach>
     </div>

Above is my code. When 1day is clicked, I want to change the background color corresponding to 1day's div to red.

And when 2day is clicked, I want to return the color of 1day back to blue and change the background color to red only for 2day.

How can I do this?