Merhaba.

<div class="row status-container">
      <div class="status-text" id="availableText">
        <i class="fas fa-check-circle"></i> Müsait
      </div>
      <div class="status-toggle-wrapper">
        <div class="status-toggle inactive" id="statusToggle"></div>
      </div>
      <div class="status-text" id="busyText">
        <i class="fas fa-times-circle"></i> Meşgul
      </div>
    </div>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script>
  $(document).ready(function() {
    $('#statusToggle').click(function() {
      $(this).toggleClass('active inactive');
      if ($(this).hasClass('active')) {
        $('#availableText').css('color', 'green');
        $('#busyText').css('color', '#fff');
      } else {
        $('#availableText').css('color', '#fff');
        $('#busyText').css('color', 'red');
      }
    });
  });
</script>
</body>
</html>

Web sitemde Müsait Ve Meşgul seçme butonum var müsaiti seçince yeşil yanıyor meşgulü seçince kırmızı yanıyor istediğim şu

Müsait olduğunda veri tabanımda seçen kullanıcının user tablosundan durum_kurye stünunu 1 yapsın ve kullanıcı müsait olsun sürekli öyle kalsın.
Kullanıcı Meşgule çektiğinde kendini seçen kullanıcının user tablosundan durum_kurye stünunu 2 olsun ve kullanıcı Meşgul olsun sürekli öyle kalsın.