Your javascript is firing both AJAX calls on page load, as that is what
$(document).ready(function()
does. There is nothing that ties either of these AJAX routines to the buttons themselves
$(document).ready(function(){
$.ajax({
url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=0',
-- skipped for brevity
}
});
$(document).ready(function(){
$.ajax({
url:'https://api.thingspeak.com/update?api_key=DLQ0F7W5FGVO1I9Q&field8=1',
-- skipped for brevity
}
});
Solutions
As these are fairly simple routines; what I would do is to redefine the functions with there own names, and explicitly call them from the two button elements (with different IDs) using the
onclick event attribute.
<script type="text/javascript">
function Subscribe() {
}
function UnSubscribe() {
}
</script>
<button id="singlebutton" name="singlebutton" class="btn btn-primary" onclick="Subscribe();">Subscribe</button>
<!--
<button id="singlebtn" name="singlebtn" class="btn btn-primary" onclick="UnSubscribe();">>Unsubscribe</button>
Reference:
https://www.w3schools.com/jsref/event_onclick.asp
Note:
The naming of the ID attributes for the 2 buttons is not really distinguishing; I actually thought you had an HTML error because I was reading them to be the same name.