Change hidden field value using jquery before submitting – Jquery ajax

I am working on a form where there is a hidden input field for button clicked, originally, the value is this field is an empty string. I want to be able to pass in a value to the hidden field as soon as a button is clicked(so I can know the button that was clicked) before the ajax call starts. Right now, this is what I’ve tried but the userType field still comes back empty after the ajax call is completed. Here’s my HTML code.

<form role="form"
  id="UserReg"
  name="UserReg"
  >
  
  
<input type="hidden"
       name="user_type_id"
       id="input_userType"
       value="">
       
    <button id="user1" name="user1"> User 1 </button>
    
    <button id="user2" name="user2"> User 2 </button>
               
       

Here’s my jQuery code

$("#user1").on('click', function (e)
{   

    //I'm trying to assign 3 to the value of the hidden field before the AJAX call

    $("#input_userType").val("3")

    
    e.preventDefault();

    let Form         =  $('#UserReg');
    



        $.ajax({

            url         :   window.location.protocol + "//" + window.location.host + '/secure/register',
            type        :   'POST',
            contentType :   "application/x-www-form-urlencoded; charset=utf-8",
            cache       :   false,
            processData :   true,
            data        :   Form.serialize()
            success     :   function (returnedData)
            {
                consoleLog('returnedData');
                             
                if(jsonData.status === false)
                {
                    // Display Error Message

                }
                else
                {
                   //Do something
                }
            },
            error       :   function (returnedData)
            {
                  //Do something
            }
        });
    }
});

After the AJAX call, the value of the hidden field still returns an empty string.