JSFiddle - React, Tailwind, and code Playground

by Aaron Bickle

HTML

<a id="tip1">blink1</a> 
<a id="tip2">blink2</a> 
<a id="tip3">blink3</a>

<input type="button" value="CLICK ME" id="btn" />

CSS

.blinked {
    color: red;
}

JavaScript

$("#btn").click(function () {
    doBlink(900);
});

function doBlink(value) {
    var time = value/3;
    blink(1, time);
}

function blink(id, time) {
    var counter = 0;
    var interval = setInterval(function () {
       $("#tip" + id).toggleClass('blinked');
       counter += 50;
        if (counter >= time && id < 4) {
            clearInterval(interval);
            id++;
            blink(id, time);
        }
    }, 100);
}
    
    /*for $("#tip1") is 300, after finishing
    for blinking one, we will call
    for blink2..etc..*/