Cannot read property of undefined hbs helper function

Question

I'm trying to write a code that will use a helper function to create a grid with a drop down list that changes the size of the grid. The dropdown list value is undefined for some reason and I'm lost. Any help would be appreciated.

The form has a dropdown list for selecting the size of the grid which should get passed into the helper function in app.js. Right now I just have a test string in the helper function to test if it's working.

Form:

<form action="/grid" method="POST">

<label>Please Select a Grid Size: </label>

<select name="numSelect" id="numSelect">
    <script>
        var options = [3, 4, 5, 10, 20]

        for(i = 0; i < options.length; i++) {
            document.write(`<option value="${options[i]}">${options[i]}</option>`)
        }
    </script>
</select>

<br>
<br>
<input id="gridBtn" type="submit" value="Generate Grid" >

app.js:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var gridRouter = require('./routes/grid');
var usersRouter = require('./routes/users');
const { handlebars } = require('hbs');
const { Console } = require('console');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

handlebars.registerHelper('colorGrid', function(size){

  var testStr = `<p>Test ${size}</p>`
  console.log(testStr);

  return new handlebars.SafeString(testStr)

})

app.get('/index', function(req, res){
  res.render('index.hbs')
})

app.post('/grid', function(req, res) {
  console.log(req.body.numSelect.options[numSelect.selectedIndex].value)
  res.render('grid.hbs', {
    size:numSelect.options[numSelect.selectedIndex].value
  })
})

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/grid', gridRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

The page that should load the grid:

<h1>{{title}}</h1>
<p>Welcome to {{title}}</p>

{{colorGrid selectedSize}}

Whenever I load the grid page I get this error:

TypeError: Cannot read property 'numSelect' of undefined at C:\ADVWebDevWinter2021\public_html\Lab4\app.js:62:24 at Layer.handle [as handle_request] (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\layer.js:95:5) at next (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\layer.js:95:5) at C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\index.js:335:12) at next (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\index.js:275:10) at expressInit (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\middleware\init.js:40:5) at Layer.handle [as handle_request] (C:\ADVWebDevWinter2021\public_html\Lab4\node_modules\express\lib\router\layer.js:95:5)