Как включить и отключить тумблер на основе события щелчка

const removeIconActiveClass = () => {
  $(".stl").each((i, el) => {
    $(el).removeClass('active')
  })
}

$(".stl").click(function() {
  removeIconActiveClass()
  $(this).addClass('active')
  $(".rating-checkbox").prop("checked", false)
  $(".no-rating-switch").addClass("text-muted")
});

$(".rating-checkbox").on("click", function() {
  removeIconActiveClass()
  $(".no-rating-switch").removeClass("text-muted")
})

.stl {
  cursor: pointer;
}

.stl:hover {
  color: blue;
}

.stl.active {
  color: red;
}

.switch,
.rating-checkbox {
  opacity: 0;
  width: 0;
  height: 0;
}

.rating-switch-wrapper {
  position: relative;
}
.rating-text-container {
  align-items: center;
  gap: 10px;
}

.slide {
  position: absolute;
  cursor: pointer;
  height: 20px;
  width: 52px;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  transform: translateY(-50%);
}

.slide:before {
  position: absolute;
  content: "";
  height: 17px;
  width: 17px;
  left: 3.2px;
  bottom: 2px;
  top: 0.5px;
  background-color: #2b547e;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.rating-checkbox:checked+.slide {
  background-color: #87d3f8;
}

.rating-checkbox:focus+.slide {
  box-shadow: 0 0 1px #87d3f8;
}

.rating-checkbox:checked+.slide:before {
  -webkit-transform: translateX(29px);
  -ms-transform: translateX(29px);
  transform: translateX(29px);
}

.slide.round {
  border-radius: 34px;
}

.slide.round:before {
  border-radius: 50%;
}

.no-rating-switch {}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="form-group col-8">
      <!-- please, never provide local routes in a snippet
      they not only do not work, but confuse the others -->
      <img src="" />
      <label class="clinical-form-label" for="power">Confidence Scale:</label>
      <p class="conf">Select Confidence level</p>
    </div>
    <div class="col-4">
      <div class="rating-text-container d-flex">
        <div class="no-rating-switch font-weight-bold">No</div>
        <div class="rating-switch-wrapper">
          <label class="rating-switch">
          <input class="rating-checkbox" type="checkbox" checked />
          <div class="slide round"></div>
        </label>
        </div>
      </div>
    </div>
  </div>
  <i class="stl icon icon-onlife-smiley-face-1">1</i>
  <i class="stl icon icon-onlife-face-2">2</i>
  <i class="stl icon icon-onlife-face-3">3</i>
  <i class="stl icon icon-onlife-face-4">4</i>
  <i class="stl icon icon-onlife-face-5">5</i>
  <i class="stl icon icon-onlife-face-6">6</i>
</div>