I have a multiline chart with mouseenter, mouseleave event to highlight one line at a time, and leave it dim when mouse leaves

There are also buttons in this chart where user can choose to view a single line:

When a button is clicked, opacity is set back to “1” to disable mouse event effect. But this doesn’t work, result is selected line is dim due to mouse event effect previously.

Like this:

Below are my code:

lineGraph
    .on("mouseenter",
        function(event) {
            const thisPath = d3.select(this);
            thisPath.style("opacity", 1);
            thisPath.attr("stroke-width", 2.25);
            thisPath.raise();
        }
        )
    .on("mouseleave",
        function(event){
            const thisPath = d3.select(this);
            thisPath.style("opacity", 0.25);
        }
    );

// ————————————————–

// On button change, update styling

// ————————————————–

d3.selectAll(".button")
    .on('click', function(event) {
        const selectedMethod = event.target.innerHTML;
        var selectedLine = d3.select("#" +selectedMethod);
        methodSelection.forEach((method, index) => {
        if (index < 1) return;
        if (selectedMethod == "All") {
            selectedLine = d3.selectAll("#" + method);
            selectedLine.attr("opacity",1);
        }
        else {
            if (method == selectedMethod) {
                selectedLine = d3.selectAll("#" +selectedMethod);
                selectedLine.attr("opacity",1);
            }
            else {
                var unselectdLine = d3.selectAll("#" + method);
                unselectdLine.attr("display", "none");
            }
        }
        })
        });

I’m unable to figure out why setting opacity = 1 doesn’t work in this case.

Any help would be greatly appreciated!