I am attempting to write custom HTML to SweetAlert2, the code I am attempting to make has the user input a bot name then submit it to our API.

The code works fine on Windows, however when I do this on Chrome MacOS I get the error Uncaught (in promise) TypeError: Cannot read properties of null (reading 'value'). The placeholder also does not register on MacOS, this all works fine on Chrome Windows though. Image of the placeholder not registering. Submission Error

I believe it has to do with the HTML not registering on Chrome Mac because I took a look within the developer console and found it to not be showing the placeholder or ID at all. Developer Console Image

Original HTML:

<a class="button w-button is-link is-light" style="min-height: 0px;border-width: 1px;cursor: pointer;justify-content: center;padding-bottom: .5em;padding-left: 2em;padding-right: 2em;padding-top: calc(.6em - 2px);text-align: center;white-space: nowrap;" target="_blank" id="change-name">Change Bot Name</a>

Sweetalert JS:

// Update Bot Name:
$(function() {
  $('#change-name').click(function() {
      Swal.fire({
          html: `<br><b>Update Bot Name</b><br><input type="text" id="newbotname" class="swal2-input" placeholder="Enter the new name for your bot.">`,
          confirmButtonText: 'Update',
          showCancelButton: true,
          focusConfirm: false,
          allowOutsideClick: false,
          reverseButtons: true,
          preConfirm: () => {
            const NewBotName = Swal.getPopup().querySelector('#newbotname').value
            if (!NewBotName) {
              Swal.showValidationMessage(`Please ensure that you have entered a new bot name!`)
            }
            return { NewBotName: NewBotName }
          }
        }).then((result) => {
          $.post("/service/bots/general/update/name",
          {
            NewBotName: `${result.value.NewBotName}`
          },
          function(data, status){
            if (data.success == true) {
              Swal.fire(
                'Updated!',
                'Your bot name has been updated.',
                'success'
              )
            } else {
              Swal.fire(
                'Oops!',
                'There was an error updating your bot name.',
                'error'
              )
            }
          });
          
      })
  })
});

I tried reading up on other answers about this but could not find one that resolves this, especially it not rendering the HTML properly such as the placeholder.