for each loop in handlebars is not working

<section>
    <div class="container mt-5">
        <div class="row">
            {{#each products}}
            <div class="col-md-3">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top"
                        src="{{this.image}}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{this.name}}</h5>
                        <p class="card-text">{{this.description}}</p>
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                    </div>
                </div>
            </div>
            {{/each}}
        </div>
    </div>
</section>

The code starts from <div class="col-md-3"> is not working when I add {{#each products}} Without the {{#each products}} it is working, Do anyone know about this?

Below is the declaration of array products.

router.get('/', function(req, res, next) {
  let products=[
    {
      name: "iPhone 11",
      category: "Mobile",
      description: "Example",
      image: "https://www.apple.com/v/iphone-11/e/images/meta/og__f2jtwncwsl2e_specs.png"
    },
    {
      name: "OnePlus 9 Pro",
      category: "Mobile",
      description: "Example",
      image: "https://www.notebookcheck.net/uploads/tx_nbc2/4_zu_3_OnePlus_9_Pro.jpg"
    }
  ]
  res.render('index', {products});
});

When I run {{log this}} It gave me this -

{
  settings: {
    'x-powered-by': true,
    etag: 'weak',
    'etag fn': [Function: generateETag],
    env: 'development',
    'query parser': 'extended',
    'query parser fn': [Function: parseExtendedQueryString],
    'subdomain offset': 2,
    'trust proxy': false,
    'trust proxy fn': [Function: trustNone],
    view: [Function: View],
    views: 'My File Name',
    'jsonp callback name': 'callback',
    'view engine': 'hbs',
    port: 3000
  },
  products: [
    {
      name: 'iPhone 11',
      category: 'Mobile',
      description: 'This is a good phone',
      image: 'https://www.apple.com/v/iphone-11/e/images/meta/og__f2jtwncwsl2e_specs.png'
    },
    {
      name: 'OnePlus 9 Pro',
      category: 'Mobile',
      description: 'This is a good phone',
      image: 'https://www.notebookcheck.net/uploads/tx_nbc2/4_zu_3_OnePlus_9_Pro.jpg'
    }
  ],
  _locals: [Object: null prototype] {},
  cache: false
}

You must end the {{/each}} before the 3rd </div> (from the last) that is, after <div class="row" I have started the {{#each products}}, so I had to end it before its closing tag. Below is the corrected code.

<section>
    <div class="container mt-5">
        <div class="row">
            {{#each products}}
            <div class="col-md-3">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top"
                        src="{{this.image}}"
                        alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">{{this.name}}</h5>
                        <p class="card-text">{{this.description}}</p>
                        <a href="#" class="btn btn-primary">Add to Cart</a>
                    </div>
                </div>
            {{/each}}
            </div>
        </div>
    </div>
</section>