JSFiddle - React, Tailwind, and code Playground

HTML

<table class="t" cellspacing=0 cellpadding=5>
    <tr>
        <td class="t">1</td>
        <td class="t top">2</td>
        <td class="t">3</td>
    </tr>
    <tr>
        <td class="t left">4</td>
        <td class="t middle">5</td>
        <td class="t right">6</td>
    </tr>
    <tr>
        <td class="t">7</td>
        <td class="t bottom">8</td>
        <td class="t">9</td>
    </tr>
</table> 
<br />
<button id="stopBlinkButton">Stop blinking</button>

CSS

table td {
    border-collapse: collapse;
    border: 1px solid #000;
    table-layout:fixed;
}

td.middle {
    border: 1px dashed black;
}

td.blink-on {
    border: dashed 1px #f00 !important;
}

JavaScript

var blinkStatus = 'off',
    currentBlinkElement = null,
    blinkTimer,
    blinkSpeed = 500,
    stopBlinkButton = document.getElementById( 'stopBlinkButton' );

function blink( element )
{
    currentBlinkElement = element;
    if( blinkStatus == 'off' ) {
        currentBlinkElement.className = currentBlinkElement.className  + ' blink-on';
        blinkStatus = 'on';
    } else {
        currentBlinkElement.className = currentBlinkElement.className.replace( ' blink-on', '' );
        blinkStatus = 'off';
    }
    blinkTimer = setTimeout( function(){ blink( element ); }, blinkSpeed );
}

function stopBlink()
{   
    clearTimeout( blinkTimer );
    if( currentBlinkElement != null ) {
        currentBlinkElement.className = currentBlinkElement.className.replace( ' blink-on',  '' );
        currentBlinkElement = null;
    }
}

document.onclick = function( e ) {
    var clickedElement;
    if(e == null) {
        clickedElement = event.srcElement;
    } else {
        clickedElement = e.target;
    }
    
    if( clickedElement.tagName == 'TD' ) {
        stopBlink();
        blink( clickedElement );
    }
};

stopBlinkButton.onclick = function(){
    stopBlink();
};