node.js - ハンドルバーの URL メソッド内でオブジェクト配列 ID を反復できない - node.js

Question

method-override パッケージ、express、express-handlebars を使用して、node.js で REST http メソッドを試す。奇妙なことに、ハンドルバーを使用してオブジェクトの配列をループできますが、特定の ID を url メソッドに割り当てようとすると、そのループの最初の項目のみが割り当てられます。

HTMLページでは、foo 1 bar 2 foobar 3が表示されます

選択されたボタンに関係なくボタンをクリックすると、ボタンがクリックされた後に次のように読み取られます: あなたのIDは: 1

私のページがそれらを読み取ることができるにもかかわらず、私のボタンメソッドの URL に特定の ID が割り当てられない理由を誰かが指摘できますか?

サーバー.js

const express = require('express');
const exphbs = require('express-handlebars');

const methodOverride = require('method-override');


const app = express();
app.use(methodOverride('_method'));

var PORT = process.env.PORT || 3000;

const products = [
    {id: 5, name: 'foo'},
    {id: 2, name: 'bar'},
    {id: 3, name: 'foobar'}
];

app.engine('handlebars', exphbs({
   defaultLayout: 'main'
}));

app.set('view engine', 'handlebars');

app.get('/', (req, res, next) => {
    res.render("index", { products });
});

app.delete('/:id?', (req, res, next) => {
    res.send('your id is: ' + req.params.id);
});

app.listen(PORT, ()=> console.log('This s*** is bananas'));

index.handlebars

<ul>
    {{#each products}}
        <li>{{this.name}}</li>
        <form method="POST" action="/{{this.id}}?_method=DELETE">
        <button type="submit">DELETE</button>
        <form>
    {{/each}}
</ul>