jqueryで属性変更ができません。

Question

現在

jqueryを用いてhtmlの属性を変更したいです。
流れとしてはボタンをクリックしたらajaxのレスポンス時に
属性を変更したいです。
レスポンス時にtextも変更しているのですが
textのみ変更がされていて属性が変更ができていません。
分かるかたお願いしたいです。
また最初はdata()を使用していましたが
DOM上のdata属性が変更されないということだったのでattr()を使用しています。

コード

<button type="submit"  class="group-request btn btn-light w-25  mx-2" data-approval=0 data-group="{{group.id}}">申請する</button>

<script>
  $('.group-request').on('click',function(e){
        e.preventDefault();
        let $click_button = $(this)
        let $approval = $(this).attr('data-approval');
        let $group = $(this).attr('data-group');
            $.ajax({
                'url': "{% url 'groups:ajax_post_add' %}",
                'type': 'POST',
                'data': {
                    'group': $group,
                    'approval':$approval,
                     csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                'dataType': 'json',
                beforeSend: function(xhr, settings) {
            // ボタンを無効化し、二重送信を防止
            $(this).attr('disabled', true);
            }
          }).then(
    // 1つめは通信成功時のコールバック
    function (data) {
          if(data.flag == 0){
                 $click_button.attr("data-approval", 1);
                 $click_button.text('申請する');
              }else if(data.flag == 1){
                 $click_button.attr("data-approval", 0);
                 $click_button.text('申請取り消し');
              }else{
                alert('申請できるのは１つのみです。');
              }
        $(this).removeAttr('disabled');
    },
    // 2つめは通信失敗時のコールバック
    function () {
        alert("なんらかの問題が発生しました。");
  });
        });
  </script>

Answer 1

自分のflagの記載ミスでした。
ありがとうございました。