How to read values in Ajax call and change status?

Question

Hi Team

 

I have two buttons in my HTML, one accept value as being 0 and other one as being 1. Now i want to read these values in Ajax call request. When these are changed, it must show status message to a user the value has been changed from 0 to 1 or vice versa. Currenly my channels are only accepting either one fire first and can view these status on my dashboard channel in thingspeak. Here is the code both HTML and Javascript.

 

<!-----HTML Buttons------>

<div class="col-md-2 text-center">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Subscribe</button> <br>
</div>
<!------
---->
<br/>
<div class = "col-md-2 text-center">
<button id = "singlebtn" name="singlebtn" class="btn btn-primary">Unsubscribe</button> <br>
</div>

<!----Jquery Buttons------>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.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);
}
});
// second button for unsubscribe.
$(document).ready(function(){
$.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);
}
});
});
});
</script>