Dynamic Website content based on user input

Hello I am creating a website using Node JS and Jade. I am trying to create a form on the website that will show a different amount of fields based on user input however, I cannot seem to get this to work. What am I doing wrong?

Within my Routes.js I have these for the page:

app.post('/newBlank', function(req, res) {
    if (req.session.user == null){
// if user is not logged-in redirect back to login page //
        res.redirect('/');
    }   else{

        fields = req.body.id    
        console.log(fields + " here")

        res.render('newBlank', {fieldsNo: req.body.id});
        console.log(req.body.id)

    }
});

app.get('/newBlank', function(req, res) {
        if (req.session.user == null){
    // if user is not logged-in redirect back to login page //
            res.redirect('/');
        }   else{
            fields = req.body.id

            res.render('newBlank', {
                title : 'New Blank',
                company : 'Company',
                fieldsNo : fields,
                udata : req.session.user
            });
        }
    });

newBlank.jade accesses a newBlank.js and a blank.jade

blank.jade is as follows:

#noform-form-container.left-center
form(method="post")#new-form.form-horizontal.well
    h2
    h6#sub1 How many fields would you like?
    hr
    .form-group
    .form-left-buttons
        input(type="number", value = 2)#NofFields
        button(type='button')#blank-form-btn1.btn.btn-default
    .form-group

PreviewImg-form-container.left-center

form(method="post")#PreviewImg-form.form-horizontal.well
    h2
    h6#sub1 This is what your form will look like on mobile
    hr
    .form-group
    .form-previmg
        img(src="images/MobileView.png")

new-fields-form-container.center

form(method="post")#new-fields.form-title.well
    h2
        .form-group
        .form-center-title
            input(type="text", value="Insert Form Title Here", id="FormTitle")
        .form-group
            input(type="text", value=fieldsNo)
            - for(var i = 0; i < fieldsNo; i++)
                hr
                .form-group
                .form-left-buttons
                    input(type="text", value="Test", id="Test")

and finally within the newBlank.js is:

this.SetNoFields = function()
{ 
    $.ajax({
        url: '/newBlank',
        type: 'POST',
        data: { id: $('#NofFields').val()},
        success: function(data){
            $('#new-fields-form-container').load(data);
        }
    });
}

So, the page (newBlank) is initially loaded with a GET request, then the user type a number into the #NofFields input within blank, when the button is pressed this number is sent via a POST request to the same page, in hopes to reload the page with an amount of fields based on the user input. Currently however, no activity happens on the page. I can see through the console log that the number is indeed sent. Through Google's Inspect I have found an error:

Syntax error, unrecognized expression: html> < html >

This error only appears when the post is called and I am unsure why.

Sorry I have written a lot here but, where am I going wrong and how can I just get the page to refresh with the amount of fields based on user input?

via Michael Ingram