How can I combine my two launch configurations into one webRoot?

I have a legacy website project written mostly in JavaScript and jQuery. I’m working on converting it to React 18 / TypeScript. Personally can’t work with out a proper debugger, and for an IDE I’m using VS Code.

The debugging works fine for both the types together, but only if I try and debug them separately.

    {
        "name": "pyHFS JS Debug Chrome launch",
        "type": "chrome",
        "request": "launch",
        "url": "https://127.0.0.1:8080/#",
        "webRoot": "${workspaceFolder}/web_interface/src",
    },
    
    {
        "name": "pyHFS React Debug Chrome launch",
        "type": "chrome",
        "request": "launch",
        "url": "https://127.0.0.1:8080/#",
        "webRoot": "${workspaceFolder}/web_interface",
        "skipFiles": [
            "node_modules",
        ],
    }

But when I try to use either of these at the same time it I get something like this. Usually the legacy JavaScript, which is not being bundled but just loaded via script tags into the browser.

enter image description here