JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<table id="workflowviz">
    <tr class="row">
        <td  data-name="step1"><span class="donearrow">OK</span></td>
        <td data-name="stage: completed ">1</td>
        <td data-name="stage: completed ">2</td>
        <td data-name="stage: completed ">3</td>
        <td data-name="stage: completed ">4</td>
        <td data-name="stage: completed ">5</td>
    </tr>
    <tr class="row">
       <td  data-name="step2">1<span class="donearrow">OK</span></td>
        <td data-name="stage: completed">1</td>
        <td data-name="stage: not completed">2</td>
        <td data-name="stage: not completed">3</td>
        <td data-name="stage: not completed">4</td>
        <td data-name="Sub Stage: New ">5</td>
    </tr>
     <tr class="row">
   <td  data-name="step3">1<span class="donearrow">OK</span></td>
        <td data-name="stage: completed ">1</td>
        <td data-name="stage: completed ">2</td>
        <td data-name="stage: completed ">3</td>
        <td data-name="stage: completed ">4</td>
        <td data-name="stage: completed ">5</td>
    </tr>
</table>

CSS

.donearrow{ background:green; display:none; width:16px; height:16px; font-size:9px;}
.done {display:block;}
td { padding:2px; border:solid 1px red;}

JavaScript

//CHECK ALL TD IN EACH TR & FIND

$(document).ready(function(){

$('#workflowviz tr').each(function () {
    var $tr = $(this);
    var $tds = $tr.find('td').filter(function () {
        return $(this).data('name') == 'stage: completed ';
    });
    if ($tds.length == 5) {
       // $tr.addClass('done');
	   $tr.children().children(".donearrow").addClass('done');
    }
});

});