How to open VS Code WebViewPanel on click of hyperlink?

I'm pretty new to VS Code extension development.

I'm trying to create and open a WebViewPanel on click of a Diagnostic target URI.

Till now, I'm able to create a Diagnostic and create a WebViewPanel separately. But with the below code, n number of WebViewPanel gets opened up in one single shot on execution where n = items.length. I'm pretty much stuck at this point. All the examples available in VS Code extension APIs documentation talk about opening a WebViewPanel on execution of a command. But that is something which I'm not looking for.

Is there a way to achieve what I'm trying to get at? Any inputs on this would be of great help.

const output = JSON.parse(stdout);
const items = output['items'];
if (violations && violations.length > 0) {
  const foundDiagnostics: vscode.Diagnostic[] = [];
  for (let index = 0; index < items.length; index++) {
    const element = items[index];
    const html = `
    <div class="path">
       <div class="label"><span class="font-light">${element['description']}</span></div>
    </div>`;
    const panel = vscode.window.createWebviewPanel('demo','Demo', vscode.ViewColumn.Beside, {});
    panel.webview.html = html;

    const code: DiagnosticCode = {
       target: vscode.Uri.parse('https://google.com'),//Sample URI. Need to open/make a WebViewPanel visible on click of this URI
       value: element['id']
    };
  }

  foundDiagnostics.push({
     range: new vscode.Range(0, 1),
     message: element['item_id'] + ': '+ element['name'] + ' (' + element['severity'] + ')',
     severity: vscode.DiagnosticSeverity.Error,
     code
  });

}