Why, when I try to access the value of a runat="server" input tag from the code behind, am I getting the original value instead of the latest value?

Question

I have a hidden input that holds the value of a nonce used for payment processing.

<input id="nonce" runat="server" clientidmode="Static" />

When the page first loads, the value called from the server side is obviously the empty string. But there is a button that updates the value of this input with the appropriate nonce:

button.addEventListener('click', function () {
              instance.requestPaymentMethod(function (err, payload) {
                  if (err) {
                      console.log('Error', err);
                      return;
                  }
                  document.querySelector('#nonce').value = payload.nonce;
                  nextPrev(1);
              });
          });

After the button gets clicked and the event gets triggered, the value of the nonce changes. Using the inspect tools, I find that the markup looks like this after clicking the button:

<input name="nonce" type="hidden" id="nonce" value="tokencc_bf_z22pd4_9nm74f_sgg8nz_dgmwvy_qc5">

Which is what I expected.

The issue is that when another button is clicked that calls a server-side function that uses this nonce value, the nonce appears to be blank from the backend:

var paymentMethodRequest = new PaymentMethodRequest
            {
                CustomerId = Client.User.BrainTreeCustomerID,
                PaymentMethodNonce = nonce.Value
            };

nonce.Value is an empty string. Even though immediately BEFORE clicking the server side button, the value is not empty and is equal to "tokencc_bf_z22pd4_9nm74f_sgg8nz_dgmwvy_qc5", as in the sample two code blocks up.

Does anyone have any idea on what is going on here?