How to set my button to be true or false and change status message?

body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><br/>
  <div class ="success"></div>
  <div class = "warning"></div>
<div class="col-md-2 text-center"> 
<button id="singlebutton" name="singlebutton" class="btn btn-primary" 
  onclick="BtnOff();">Off</button> <br>
 </div>
  <!------
  ---->
  <br/>
<div class = "col-md-2 text-center">
  <button id = "singlebtn" name="singlebtn" class="btn btn-primary" 
  onclick = "BtnOn();">On</button> <br>
</div>
</body>

function BtnOff() {
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=D**&field8=0',
      type:'GET',
      data:{
      type:'text'
      },
      success:function(response){
        alert(response);
        $('div.warning').html('status changed').delay(1000).fadeOut();
        $('#singlebutton').append(data);
         }
    
    });
    //setTimeout("Subscribe()", 100);
  
    }
  // second button to unsubscribe.
  function BtnOn() {
    $.ajax({
      url:'https://api.thingspeak.com/update?api_key=D**&field8=1',
      type:'GET',
      data:{
      type:'text'
      },
      success:function(response){
        alert(response);
        $('div.success').html('status changed').delay(1000).fadeOut();
        $('#singlebtn').append(data);
         }
    
      });
    //setTimeout("UnSubscribe()", 100);
  }