JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
    <tr>
        <td colspan="2" rowspan="2">A</td>
        <td colspan="2">B</td>
        <td colspan="2">C</td>
        <td colspan="2">D</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
        <td>P</td>
        <td>R</td>
        <td>S</td>
    </tr>

    </tbody>
</table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 40px 0;
}
th,td {
    border: 1px #aaa solid;
    box-sizing:
}

JavaScript

$(document).ready(function(){
    $.fn.getNonColSpanIndex = function()
    {
        if(! $(this).is('td') && ! $(this).is('th'))
        {
            return -1;
        }

        var allCells = this.parent('tr').children();
        var normalIndex = allCells.index(this);
        var nonColSpanIndex = 0;

        allCells.each(function(i, item)
        {
            if(i == normalIndex)
                return false;

            var colspan = $(this).attr('colspan');
            colspan = colspan ? parseInt(colspan) : 1;
            nonColSpanIndex += colspan;
        });

        return nonColSpanIndex;
    };

$('table tr').each(function (i, element)
       {
           var td = $(element).find('th,td');
           
           $(td).each(function (index, el)
                  {
                      console.log($(el).text(), $(el).getNonColSpanIndex(), $(el).index());                      
                  });
       });
})