Function for changing text button changes back when clicking the same button again

As the title says, if I click on both buttons, they change from "Add" to "Update", but they change back if I click on the exact same button.

My intention is if click the edit button coming from "Add" then the targeted other button switches from Add to Update, and it needs to stay on "Update" if I click it again.

Add Button and Function:

  <button id="createNewCategory" type="submit" class="btn btn-outline-secondary" data-toggle="modal" data-target="#categoryModal"><i class="fas fa-plus-circle " aria-hidden="true"></i> New Category</button>

  $(document).on('click', '#createNewCategory', function(){
    $("#save_button_span").html($("#save_button_span").html() === " Update" ? " Add" : " Update");
});

Update Button and Function:

  <button type="button" class="btn btn-primary save"><i class="fas fa-save" aria-hidden="true"></i><span id="save_button_span"> Add</span></button>

  $(document).on('click','.edit_group',function () {
            $("#save_button_span").html($("#save_button_span").html() === " Add" ? " Update" : " Add");

});

What do I change in both of my conditions to solve my issue?

$("#save_button_span").html($("#save_button_span").html() === " Update" ? " Add" : " Update");

Screenshot, I am clicking on "New Category" on both occasions, the button needs to stay as "Add" if I do this.