Как изменить цвета в вашем статусном сообщении, используя bootstrap и Jquery?

Question

У меня есть код bootstrap, в котором есть оповещение о классе div, я хочу найти способ, при котором кнопка включается, чтобы ее цвет был зеленым, а если он выключен - красным. Мне нужны помощники для этой логики c, и моя логика c для этой попытки ниже, то, что код делает в настоящее время, мало чем отличается только от статуса статуса.

$(document).ready(function() {
  $('#toggle_event_editing button').click(function() {
    if ($(this).hasClass('locked_active')) {
      $('#switch_status').html('Switched off.');
      $.ajax({
        url: 'https://api.thingspeak.com/update?api_key=1LP18C8BQCYHYUI9&field8=0',
        type: 'GET',
        data: {
          format: 'text'
        },
        success: function(response) {
          alert(response);
        },
        error: function() {
          $('#error').text("There was an error while processing your request.Please try again");
          //$('#singlebtn').append(data);
        }
      });
    } else {
      $('#switch_status').html('Switched on.');
      $.ajax({
        url: 'https://api.thingspeak.com/update?api_key=1LP18C8BQCYHYUI9&field8=1',
        type: 'GET',
        data: {
          format: 'text'
        },
        success: function(response) {
          alert(response);
        },
        error: function() {
          $('#error').text("There was an error while processing your request.Please try again");
          //$('#singlebtn').append(data);
        }
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="wrapper" align="center">
  <div class="btn-group" id="toggle_event_editing">
    <button type="button" class="btn btn-danger locked_active">OFF</button>
    <button type="button" class="btn btn-success unlocked_inactive">ON</button>
  </div>
  <div class="alert alert-info" id="switch_status">Switched off.</div>
</div>
<br/>