How to make button update after ajax click?

Question

JavaScript

So that when you click on the enable button, it immediately changes to disable

<button type="button" class="btn btn-success" id="zadaniya_off" name="zadaniya_off">Отключить</button>
<button type="button" class="btn btn-success" id="zadaniya" name="zadaniya">Включить</button>

$("#zadaniya_off").on('click', function() {
    var zadaniya_off = $("#zadaniya_off").val();
    var data = {
        'zadaniya_off': $("#zadaniya_off").val(),
    };
    $.ajax({
      url:"/personal", 
      data:data, 
      type:'POST', 
      dataType: 'json',
      success:function(data){
        if( data.code == 0 ) {
          $('#okey').html('<div class="callout callout-success">Успешно выключено.</div>');
        }
      }
    });

  });
  
  $("#zadaniya").on('click', function() {
    var zadaniya = $("#zadaniya").val();
    var data = {
      		'zadaniya': $("#zadaniya").val(),
    };
    $.ajax({
      url:"/personal", 
      data:data, 
      type:'POST', 
      dataType: 'json',
      success:function(data){
        if( data.code == 1 ) {
          $('#okey').html('<div class="callout callout-success">Успешно включено.</div>');
        }
      }
    });

  });

We display the text with a successful enable/disable I send the codes like this:
<div id="okey"></div>

$answer = [
    'code' => '1',
  ];
  echo(json_encode($answer));
  die();

Answer 1

With ajax - will not work on the field - you need a server
https://jsfiddle.net/cajhu3ds/14/

Answer 2

None of the suggested ones work or fit.