jQuery find changed attribute value after changing it with jQuery

Question

I do not know if what I am doing is the right approach to do it. But what I am trying to do is the following.

I have a menu that a user can open and close buy clicking on the menuhead button. What I want is to save the status open or closed into my database so that when the user refreshes the page or when he logs in again the menu status is open or close as they intended.

The html button below has an attribute

data-menustatus="<?php echo $showam; ?>"

which stores the status value of the menu item from the database. 1 for open and 0 for closed.

<button class="btn-toggle hass-menuhead align-items-center collapsed MenuStatus" type="button" data-menuitem="accounts" data-menustatus="<?php echo $showam; ?>" data-bs-toggle="collapse" data-bs-target="#Accounts-collapse" data-bs-display="static" aria-expanded="true">
          Accounts Menu
</button>

When the user clicks on the button I get that value and write it to the database and make it check for 1 or 0 and depending on the outcome I store 1 or 0. I use jQuery to change the data-menustatus="<?php echo $showam; ?>" to 1 or 0 depending on the original number. When I inspect the console I see it change to 1 when the original data is 0, as intended.

Now the problem. When I click on that same button again it now should read 1 as that is the value that jQuery changed and is showing in the console. But instead jQuery is still finding the original 0 instead of the new 1 value.

I am not a expert in jQuery and I tried this in below script. What am I doing wrong? I this not possible? All help is welcome !

$(document).on("click", ".MenuStatus", function () {
var MenuStatus = $(this).data("menustatus");
var MenuItem = $(this).data("menuitem");

if(MenuStatus == 1) {
    $(this).attr('data-menustatus','0');
} else {
    $(this).attr('data-menustatus','1');
}
console.log(MenuStatus);

$.ajax({
type: "POST",
url: "../menu/SetMenuFilters.php",
data: {MenuStatus: MenuStatus,MenuItem: MenuItem},
success: function(data) {
},

error: function(xhr, status, error) {
 if(xhr.status&&xhr.status==401){
p.error('Session is broken, login again.'); 
setTimeout(window.location.reload.bind(window.location), 4000);
}else{
alert("Something went wrong, try again later."); 
       } }
});
});

Answer 1

The second parameter of data() takes a new value. Try this instead:

$(document).on("click", ".MenuStatus", function () {
  var MenuStatus = $(this).data("menustatus");
  var MenuItem = $(this).data("menuitem");

  if (MenuStatus == 1) {
    $(this).data('menustatus', '0');
  } else {
    $(this).data('menustatus', '1');
  }
  console.log(MenuStatus);
  $.ajax({
    type: "POST",
    url: "../menu/SetMenuFilters.php",
    data: {
      MenuStatus: MenuStatus,
      MenuItem: MenuItem
    },
    success: function (data) {},

    error: function (xhr, status, error) {
      if (xhr.status && xhr.status == 401) {
        p.error('Session is broken, login again.');
        setTimeout(window.location.reload.bind(window.location), 4000);
      } else {
        alert("Something went wrong, try again later.");
      }
    }
  });
});

In short the reason is that jQuery handles data separate from HTML attributes. You can actually store whole objects calling .data() without DOM updates stressing the browser.

Documentation:
https://api.jquery.com/data/