PugJS trying to use variable values on form attributes - node.js

Question

I'm currently trying to make a quiz using PugJS. I'm trying to group the answers that are in the body when the form is posted.
Currently when I post the following form I get this data:
console.log(JSON.stringify(req.body));
returns the following: {"answer":["a","b","c","d","e","f"]}
All of the data is in the same "answer" object.
In my PugJS file I do the following:
block contents
form(action=url, method='POST')
each question in config
h1= question.question
.row.mb-3
- for (var x = 0; x < question.requiredAnswers; x++)
label.col-sm-2.col-form-label(for='answer') Antwoord #{x + 1}
.col-sm-10
input.form-control(type='text' name='answer' id='answer')
hr
button.btn.btn-primary(type='submit', value='Submit') Verzend de antwoorden
As you can see I keep using the same label(for='answer') and input(name='answer' id='answer')
I tried to use the variable x to change the objects to: label(for='answer #{x + 1}') and input(name='answer #{x + 1}' id='answer #{x + 1}')
The output I would like:
{"answer1":["a"], "answer2":["b","c"], "answer3":["d","e","f"]}
I also tried a escaping the variable using #{x + 1} but no luck!

Answer 1

The browser will submit form parameters only as simple key-value pairs. If there are multiple keys with the same name, they will be submitted as they are, repeatedly. I think it is the Express body-parser middleware that converts keys with the same names into an array.
In Express, req.body.someParameter is a string value if someParameter occurs only once in your form. It is an array of strings if that parameter is received more than once.
doctype html
html
body
//- Test data:
- const config = [ { requiredAnswers: 1}, { requiredAnswers: 2},{ requiredAnswers: 3}]
form(method="post")
each question,i in config
p Q#{i+1}
ul
- for (let x=0; x<question.requiredAnswers; x++)
label(for="Q"+i+"A"+x) Antwoord #{x+1}
input(name="answer"+(i+1) id="Q"+i+"A"+x)
br
input(type="submit")
The above labels when clicked will set focus to each respective input box correctly. When submitted with the same values you used, the browser sends the following in the request payload:
answer1=a&answer2=b&answer2=c&answer3=d&answer3=e&answer3=f
and req.body at the server is:
{"answer1":"a","answer2":["b","c"],"answer3":["d","e","f"]}