点击使用JavaScript后无法停止链接闪烁

I want to stop blinking of the link "View" after clicking it using a JavaScript code:

css:

.blinking span {
    -webkit-animation: 0.5s linear infinite condemned_blink_effect; 
    animation: 1.5s linear infinite condemned_blink_effect;
}

@-webkit-keyframes condemned_blink_effect { 
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

@keyframes condemned_blink_effect {
    0% {
        visibility: hidden;
    }
    50% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

php and JS:

<?php  
echo "<tr >";
echo "<td width='150'> <a href='disdata.php?id=" . $dispReturn->dispID . "' class='blinking'><span> View </span> </a> </td> ";
echo "</tr>";
?>

<script>
    function stopBlinking(e) {
        e.currentTarget.classList.remove('blinking');
    }

    const blinking = document.querySelectorAll('.blinking');

    for (link of blinking) {
        link.addEventListener("click", stopBlinking);
    }
</script>

The JS code can't stop blinking of the link "view" after clicking it so my expectation is stoping the blinking effect after clicking the link by modifying my js code.