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, div { padding:2px; border:solid 1px red;}

JavaScript

//CHECK  TD  available IN table if no add something in table

$(document).ready(function(){

$('#workflowviz').each(function () {
    //var $tr = $(this);
    var $tdnum = $( "td" ).length;
    alert($tdnum);
     if ($tdnum > 0) {
        alert("TDs more than 0");
         $( "#workflowviz tbody" ).append( "<tr><td>.</td><td>.</td><td>.</td><td>.</td><td>.</td><td>.</td></tr>" );
	   //$tr.children().children(".donearrow").addClass('done');
    }
    
});

});