Как создать многоуровневую опцию выбора в pug (HTML) после получения значений из node.js?

Question

У меня есть объект JSON, временно помещенный вместе внутри функции в файл JS.Объект JSON содержит клиентов и их работу.Я хотел бы создать select, который имеет несколько option динамически.

router.get('/timesheet', async (req, res) => {
    // const clients = await middleware.getClients();
    const clients = {
        "records": [
            {
                "client": "Batman",
                "jobs": [
                    "Batmobile",
                    "Batarang"
                ]
            },
            {
                "client": "Joker",
                "jobs": [
                    "Rob bank",
                    "Recruit villians"
                ]
            }
        ]
    };
    if(clients) {
        res.render('timesheet', {title: 'Timesheet', message: clients.records});
        // res.render('timesheet', {title: 'Timesheet', message: clients.records.client});
        // res.render('timesheet', {title: 'Timesheet', message: JSON.stringify(clients.records)});
    } else {
        res.render('timesheet', {title: 'Timesheet', message: 'Failed to fetch client data'});
    }
});

module.exports = router;

extends layout

block content
    .container
        p= JSON.stringify(message[0]['client'])
        select#client_name(name="")
            each value, index in message
                option(value="JSON.stringify(value['client'])")= (index+1) + ': ' + JSON.stringify(value['client'])
        select#client_job(name="")
            each value, index in message
                option(value="JSON.stringify(value['jobs'])")= (index+1) + ': ' + JSON.stringify(value['jobs'])

Посмотрите на картинку, представленную, если клиент Бэтмен, задания будут Бэтмобиль и Батаранг.Я хотел бы, чтобы эти 2 были под разными вариантами <option>Batarang</option и <Batmobile>, но я не знаю, как их далее разделить.Я получаю <option>Batmobile, Batarang</option>.