d3.js - Toggle attributes/styles on a <line> element based on its label relation

Question

StackBlitz demo - stackblitz is flaky in chrome, may not show preview. I use edge with stackBlitz, also fine on chrome for mobile.

I've created this force directed graph that has multiple labels attached to paths that sit on a <line>. When clicking these labels it updates the style of the <line> that it relates to. The issue is when another label on the corresponding path/line element is clicked the previous style state is not removed.

If this was one label the structure would be different and could toggle with a .selectall and target the .class attribute. But as these labels are looped with thier own paths and lines it becomes a little trickier.

Relevant code on line 286:

svg.selectAll('.edgelabel').on('click', function (d) {
  // arrow function will produce this = undefined
  _d3.selectAll('.nodeText').style('fill', 'black');
  _d3.selectAll('.edgelabel').style('fill', '#999');
  _d3.select(this).style('fill', 'blue');

  const thisLine = linkEnter.filter((e) => e.index === d.index);

  if (d.lineStyle === 'Confirmed') {
    console.log('Confirmed', d.lineStyle);
    thisLine.style('stroke', '#444');
    thisLine.style('stroke-dasharray', '0');
  } else if (d.lineStyle === 'Unconfirmed') {
    console.log('Unconfirmed', d.lineStyle);
    thisLine.style('stroke-dasharray', '8, 5');
  }
});

If a label has the value of confirmed it styles the line a part, then unconfirmed should style its own line another way, but at the same time the confirmed line needs to "disappear" styled so you can no longer see it.

StackBlitz demo