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='120'></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 () {
    $tr = $('.counter').closest('tr');
    $trId = $tr.attr('id');
    $span = $('#' + $trId).find('.counter');
    $counter = $span.attr('rel');
    console.log($counter);
    setInterval(function () {
        $counter--;
        $span.attr('rel', $counter);
        if ($counter >= 0) {
            $span.html($counter);
        }
        // Display '$counter' wherever you want to display it.
        if ($counter === 0) {
            //return true;
            console.log('finished');
            clearInterval($counter);
        }
    }, 1000);
});