JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr id="id1">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td> <span class="counter" rel='3'></span>

        </td>
    </tr>
    <tr id="id2">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td> <span class="counter" rel='200'></span>

        </td>
    </tr>
    <tr id="id3">
        <td>img</td>
        <td>#</td>
        <td>type</td>
        <td>status</td>
        <td> <span class="counter" rel='50'></span>

        </td>
    </tr>
</table>

CSS

table {
    border: 1px solid silver;
}
td {
    width: 50px;
}
.counter {
    border-bottom: 1px solid red;
}

JavaScript

$(function () {
    $('.counter').each(function () {
        var duration = +$(this).attr('rel'),
            $span = $(this);
        var counter = setInterval(function () {
            duration--;
            $span.attr('rel', duration);
            $span.html(duration);
            if (duration <= 0) {
                console.log('finished');
                clearInterval(counter);
            }
        }, 1000);
    });
});