Unable to access Javascript variables in JSP

Question

I have a Javascript code which I am using in my HTML page. The code get executed when a button is clicked on a form. Then it create a new user in firebase. After that it creates a new user in my database. Finally, it sign-in using firebase.

Form code is as below

<form id="register-form" class="form" action="" method="post">
   <div class="form-group row">
      <input type="text" id="name" name="name" class="form-control" placeholder="Name">
   </div>
   <div class="form-group row">
      <input type="text" id="address" name="address" class="form-control" placeholder="Address">
   </div>
   <div class="form-group row">
      <input type="number" id="phone" name="phone" class="form-control" placeholder="Phone">
   </div>
   <div class="form-group row">
      <input type="email" id="email" name="email" class="form-control" placeholder="Email">
   </div>
   <div class="form-group row">
      <input type="password" id="password" name="password" class="form-control" placeholder="Password">
   </div>
   <div class="form-group row">
      <input type="text" id="language" name="language" class="form-control" placeholder="Language">
   </div>
   <div class="form-group row">
      <button type="button" class="btn btn-primary green max round" onClick="registerUser()">Create Account</button>
   </div>
</form>

Javascript code is as below

<script >

    function registerUser() {
        alert("hi");

        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;


        //Create User with Email and Password
        firebase.auth().createUserWithEmailAndPassword(email, password).then(function(user) {
            var user = firebase.auth().currentUser;
            alert(user.email); // Optional


            var email = firebase.auth().currentUser.email;
            var name = document.getElementById("name").value;
            var address = document.getElementById("address").value;
            var phone = document.getElementById("phone").value;
            var language = document.getElementById("language").value;


                //alert(email);
                // console.log(email) contains email

                const options = {
                    method: 'POST',
                    url: 'Register',
                    headers: {
                        // set appropriate headers, assuming json here
                        //"Content-Type": "application/json",
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    // form body, assuming json
                    //body: JSON.stringify(email)
                body: `email=${email}&name=${name}&address=$(address}&phone=${phone}&${language}`
                }
                //alert(email);
                url = 'Register';
                fetch(url, options)
                    .then(response => loginUser(`${email}`,`${password}`))
                    .then(data => console.log(data))
                    .catch(e => console.error(e))


        }, function(error) {
            // Handle Errors here.
            var errorCode = error.code;
            var errorMessage = error.message;
            alert(errorMessage);
        });

    }

    function loginUser(email,password)
    {
        firebase.auth().signInWithEmailAndPassword(email, password).then(function(firebaseUser) {
                //var email = firebase.auth().currentUser.email;
                //alert(email);
                // console.log(email) contains email
                const options = {
                    method: 'POST',
                    url: 'LoginValidator',
                    headers: {
                        // set appropriate headers, assuming json here
                        //"Content-Type": "application/json",
                        "Content-Type": "application/x-www-form-urlencoded"
                    },
                    // form body, assuming json
                    //body: JSON.stringify(email)
                    body: `email=${email}`
                }
                //alert(email);
                url = 'LoginValidator';
                fetch(url, options)
                    .then(response => window.location.href = 'LoadCategoryList')
                    .then(data => console.log(data))
                    .catch(e => console.error(e))


            })

            .catch(function(error) {
                // Handle Errors here.
                var errorCode = error.code;
                var errorMessage = error.message;
                // [START_EXCLUDE]
                if (errorCode === 'auth/wrong-password') {
                    alert('Wrong password.');
                } else {
                    alert(errorMessage);
                }
                console.log(error);
                document.getElementById('quickstart-sign-in').disabled = false;
                // [END_EXCLUDE]
            });
    }
</script>

This works fine as expected. However when I convert this HTML page into a JSP, the Javascript code is malfunctioning. At that stage, it seems the following code is simply delivering some empty content to my servlet. The data is saved in database via the servlet but with blank content.

body: `email=${email}&name=${name}&address=$(address}&phone=${phone}&${language}`

What is going on in here?

UPDATE 1

I tried hardcoding data as below

body: `email=aug10@gmail.com&name=aug10&address=something&phone=0999090909&language=abcd`

The data is saved but still an error the email is badly formatted. Seems it is delivering empty data in body: 'email=${email}' of signInWithEmailAndPassword