How to make on button to update correctly and off not to ?

Question

Hi team

 

I have two buttons and want them to function like turning a light bulb on and off. What the buttons does currently on button whether the value is 0 or 1 takes as it an argument and update it to my channel. I only want to let the user if the button value is 1 should update once not twice, when the button is invoked from the browser. While off should not take that remaining value of on be updated to it, so what the code is doing and it does not look good to user experience.

 

<!---Button functionality---->

<br>

<div class="form-group"><br>

<div class="col-md-2 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-2 text-center">

<button id = "singlebtn" name="singlebtn" class="btn btn-success"

onclick="BtnOn();">On</button><br>

</div>

</div>

 

// button click functionality here.

function BtnOff () {

$.ajax({

url: 'https://api.thingspeak.com/update?api_key=D**&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);

}

});

}

function BtnOn() {

$.ajax({

url: 'https://api.thingspeak.com/update?api_key=D**&field8=1',

type: 'GET',

data: {

format: 'text'

},

success: function (response) {

alert(response);

},

error: function () {

$('#error').text("There was an error processing your request.Please try again");

$('#singlebtn').append(data);

}

});

}