ID of button changes, but document.ready function calls previous value's method

I'm writing a simple single page application with Express.js. At the bottom of the page is a form, and this form is used to add users to a table, or to update a specific user. The 'submit' button will have a different function depending on the ID of the button at the time it is pressed.

Inside my document.ready function, I have 2 lines of interest:

$('#btnAddUser').on('click', addUser);
$('#btnUpdateUser').on('click', updateUser);

I also have methods that change the value of this id from #btnAddUser to #btnUpdateUser, and vice versa. I can get the ID to change. The issue is that the document.ready function doesn't seem to consider these changes.

For instance, the app starts out with the id #btnAddUser. Then I change it to have the Id #updateUser, and I can see that this works. When I press the button, though, the addUser method fires instead of the updateUser method, and I'm not sure why.