Как сделать так, чтобы вкл/выкл должен быть один тумблер в jquery?

---

Я создал две отдельные кнопки как на моем HTMl, так и на Jquery, я хочу найти способ, который может сделать кнопку on, которая будет выполнять работу по переключению. Возможно ли это? Пожалуйста, просмотрите мой код ниже, Спасибо.

Что я уже пробовал:

<div class="form-group"><br>
<div class="col-md-3 text-center">
<button id = "singlebutton" name="singlebutton"
class="btn btn-danger " onclick="BtnOff();">Off</button><br>
</div>
</div>
<br/>
<div class="form-group"><br>
<div class="col-md-3 text-center">
<button id = "singlebtn" name="singlebtn"
class="btn btn-success " onclick="BtnOn();">On</button><br>
 
// button click functionality here.
$('.btnOff').on('click', function(){
BtnOff();
$(this).off('click');
});
$('.btnOn').on('click', function(){
BtnOn();
$(this).off('click');
});
// functionality for button-Off.
function BtnOff() {
$.ajax({
url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
type:'GET',
data:{
format:'text'
},
success:function(response) {
alert(response);
},
error:function(){
$('#error').text("There was an error processing your request.Please try again");
$('#singlebutton').append(data);
}
});
}
// functionality for On Button.
function BtnOn() {
$.ajax({
url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&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);
}
});
}

---