JSFiddle - React, Tailwind, and code Playground

HTML

<a id="tip1">blink1</a> 
<a id="tip2">blink2</a> 
<a id="tip3">blink3</a>
<a id="tip4">blink1</a> 
<a id="tip5">blink2</a> 
<a id="tip6">blink3</a>
<a id="tip7">blink1</a> 
<a id="tip8">blink2</a> 
<a id="tip9">blink3</a>
<a id="tip10">blink3</a>

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

CSS

.blinked {
    color: red;
}

JavaScript

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

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

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