How to update the Meta user with a click of the AJAX button

I'm creating an add-on and I need help with AJAX.

Through a shortcode, I am showing an array of checkbox in a frontend user page and I would like that when the user clicks on a submit button, the checkbox matrix is ​​saved in user_meta.

I'm not sure if I need an external .js file or not. I would prefer not if I do not have to. And I'm not sure if all this code should be inside my abbreviated code, or it should be in the real plugin. I thought that if I put it inside the short code that the script will only load on the pages with the short code, where necessary.

I am a complete noob in this, so any help is very much appreciated!
Thank you!

This code is in my plugin file, inside a shortcode:

        // ADD THE AJAX WRITER TO THE PAPER ONLY ON THE PAGES WITH SHORT CODE

add_action (& # 39; wp_footer & # 39 ;, & # 39; my_action_javascript & # 39;);


function my_action_javascript () {?>
        
        <? php
}


// register the ajax action for authenticated users
add_action (& # 39; wp_ajax_mark_message_as_read & # 39 ;, save_data_to_user_meta & # 39;);

// register the ajax action for unauthenticated users
add_action (& # 39; wp_ajax_nopriv_mark_message_as_read & # 39 ;, save_data_to_user_meta & # 39;);

// handle the ajax request
save_data_to_user_meta () function {

if (! current_user_can (& # 39; edit_user & # 39 ;, $ user_id)) {return false; }
update_usermeta ($ user_id, & # 39; user_categories & # 39 ;, $ _POST['user_categories'] );
}

Example form: