JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <td>Shiva</td>
        <td>Math</td>
        <td>A</td>
        <td>rnd</td>
    </tr>
    <tr>
        <td>Shiva</td>
        <td>Math</td>
        <td>B</td>
        <td>rnd2</td>
    </tr>
    <tr>
        <td>Shiva</td>
        <td>Science</td>
        <td>A</td>
        <td>rnd</td>
    </tr>
    <tr>
        <td>Shiva</td>
        <td>Science</td>
        <td>B</td>
        <td>rnd</td>
    </tr>
    <tr>
        <td>Shiva</td>
        <td>Science</td>
        <td>C</td>
        <td>rnd3</td>
    </tr>
    
    <tr>
        <td>RAM</td>
        <td>Math</td>
        <td>A</td>
        <td>rnd3</td>
    </tr>
    <tr>
        <td>RAM</td>
        <td>Math</td>
        <td>A</td>
        <td>rnd5</td>
    </tr>
    <tr>
        <td>RAM</td>
        <td>Math</td>
        <td>B</td>
        <td>rnd4</td>
    </tr>
    
    <tr>
        <td>RAM</td>
        <td>Science</td>
        <td>A</td>
        <td>rnd</td>
    </tr>
    <tr>
        <td>RAM</td>
        <td>Science</td>
        <td>B</td>
        <td>rnd</td>
    </tr>
    <tr>
        <td>RAM</td>
        <td>Science</td>
        <td>C</td>
        <td>rnd7</td>
    </tr>
    </table>

CSS

table td{
    padding:10px;
}

JavaScript

console.clear();
var table = $("table");
var rows = table.find($("tr"));
var colsLength = $(rows[0]).find($("td")).length;
var removeLater = new Array();
for(var i=0; i<colsLength; i++){
    var startIndex = 0;
    var lastIndex = 0;
    var startText = $($(rows[0]).find("td")[i]).text();
    for(var j=1; j<rows.length; j++){
        var cRow =$(rows[j]);
        var cCol = $(cRow.find("td")[i]);
        var currentText = cCol.text();
        if(currentText==startText){
            cCol.css("background","gray");
            console.log(cCol);
            removeLater.push(cCol);
            lastIndex=j;
        }else{
            var spanLength = lastIndex-startIndex;
            if(spanLength>=1){
                console.log(lastIndex+" - "+startIndex)
                //console.log($($(rows[startIndex]).find("td")[i]))
                $($(rows[startIndex]).find("td")[i]).attr("rowspan",spanLength+1);
            }
            lastIndex = j;
            startIndex = j;
            startText = currentText;
        }
            
    }
    var spanLength = lastIndex-startIndex;
            if(spanLength>=1){
                console.log(lastIndex+" - "+startIndex)
                //console.log($($(rows[startIndex]).find("td")[i]))
                $($(rows[startIndex]).find("td")[i]).attr("rowspan",spanLength+1);
            }
    console.log("---");
}

for(var i in removeLater){
    $(removeLater[i]).remove();
}