Hi Team I want to change the status of a message to be true, when the button is clicked 'on' and vice versa when is clicked off to be off. So far the functionality seem working not according to what i need it to be. e.g If my button is off, button continues to previous state as true(on). Off which i dont want that, want current state the button to be it remain and keep its value. Like if its on should be remain its value as on, same applies to off logic. I am struggling to get this work. I show you my code so far what i have done. <!---HTML code----> <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-danger" onclick="BtnOff();">Off</button> <br> </div> <!------ ----> <br/> <div class = "col-md-2 text-center"> <button id = "singlebtn" name="singlebtn" class="btn btn-success" onclick = "BtnOn();">On</button> <br> </div> </body> </html> <!----Javascript code----> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> 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 to zero').delay(1000).fadeOut(); $('#singlebutton').append(data); } }); //setTimeout("Subscribe()", 100); } // second button to unsubscribe. function BtnOn() { $.ajax({ url:'https://api.thingspeak.com/update?api_key=*****&field8=1', type:'GET', data:{ type:'text' }, success:function(response){ alert(response); $('div.success').html('status changed to one').delay(1000).fadeOut(); $('#singlebtn').append(data); } }); //setTimeout("UnSubscribe()", 100); } </script>