How to make on/OFF should be a single toggle switch in jquery?

See more:

jQuery

I have created two separate buttons on both my HTMl and Jquery, i want to find a way that can make on button that would do the work to do the switch. Is this possible? Please view my code below, thanks.

What I have tried:

<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);
}
});
}