How to set hover style on button after clicked and leave the button?

I have HTML page on this link have many buttons. When mous pointer hover button the button border color changed to orange.

I want after cliked the button, set style hover on button even when leave the button then if clicked on another button remove style hover from perv button and set style hover on button cliked.

I try below code but not work.

 $(".bookly-hour").on('click', function(event){ 

    $(".bookly-hour").removeAttr('class');
    $(this).addClass("bookly-hour bookly-hour:hover");


});

But not work How can I fix?

Solution

You need to override the bookly css and also keep the colour using a class

const $buttons = $(".bookly-hour")
  .on('click', function() {
    $buttons.removeClass('selected');
    $(this).toggleClass('selected');
  });

.bookly-columnizer .bookly-hour:hover,
.bookly-columnizer .bookly-hour.selected {
  border: 2px solid #f4662f !important;
  color: #f4662f;
}

 /* Circle */
.bookly-columnizer .bookly-hour.selected span.ladda-label.bookly-time-main i.bookly-hour-icon {
  background: none;
  border: 2px solid #f4662f;
  color: #f4662f;
  width: auto;
  height: auto;
  padding: 3px;
  border-radius: 25px;
  margin-right: 3px;
}

/* Dot */
.bookly-columnizer .bookly-hour.selected span.ladda-label.bookly-time-main .bookly-hour-icon span {
  background: #f4662f;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  display: block;
}

<link href="https://www.booking-wp-plugin.com/use-cases/pet-service-appointment-case/wp-content/plugins/bookly-responsive-appointment-booking-tool/frontend/resources/css/bookly-main.css?ver=23.7" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="bookly-columnizer" style="left: 0px;">
  <div class="bookly-column">
    <button class="bookly-day bookly-js-first-child" value="2024-08-09">Fri, Aug 09</button>

    <button value='[[1,1,"2024-08-09 08:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>8:00 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 08:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>8:15 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 08:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>8:30 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 08:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>8:45 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <br>
    <button value='[[1,1,"2024-08-09 09:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>9:00 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 09:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>9:15 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 09:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>9:30 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 09:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>9:45 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 10:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>10:00 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 10:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>10:15 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 10:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>10:30 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 10:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>10:45 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 11:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>11:00 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,2,"2024-08-09 11:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>11:15 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button><br>
    <button value='[[1,2,"2024-08-09 11:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>11:30 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,2,"2024-08-09 11:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>11:45 am
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,2,"2024-08-09 12:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>12:00 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,4,"2024-08-09 12:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>12:15 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,4,"2024-08-09 12:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>12:30 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,4,"2024-08-09 12:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>12:45 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 13:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>1:00 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 13:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>1:15 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button><br>
    <button value='[[1,1,"2024-08-09 13:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>1:30 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 13:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>1:45 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 14:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>2:00 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 14:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>2:15 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 14:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>2:30 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 14:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>2:45 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 15:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>3:00 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button><br>
    <button value='[[1,1,"2024-08-09 15:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>3:15 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 15:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>3:30 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 15:45:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>3:45 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 16:00:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>4:00 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button><br>
    <button value='[[1,1,"2024-08-09 16:15:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>4:15 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 16:30:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>4:30 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
    <button value='[[1,1,"2024-08-09 16:499:00",0]]' data-group="2024-08-09" class="bookly-hour">
            <span class="ladda-label bookly-time-main">
                <i class="bookly-hour-icon"><span></span></i>4:45 pm
            </span>
            <span class="bookly-time-additional"> </span>
        </button>
  </div>

</div>