JSFiddle - React, Tailwind, and code Playground

HTML

<table border="2" id="aTable">
    <tr>
        <td>1</td>
        <td>A</td>
        <td>AA</td>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>Second</td>
        <td>V</td>
        <td>X</td>
    </tr>
    <tr>
        <td>Third</td>
        <td>D</td>
        <td >X</td>
    </tr>
    <tr>
        <td>Third</td>
        <td>E</td>
        <td>X</td>       
    </tr>
</table>

JavaScript

var firstRow = 0;
var lastRow = 4;

$('#aTable td').each(function() 
{
    var $this = $(this);
    var col = $this.index();                
    var txt =  $this.text();                
    var row = $(this).parent()[0].rowIndex; 
    
    //define the interval of lines and columns it will look at
    if((col==0 || col==1 || col==2) && row>=firstRow && row<=lastRow){ 
        span=1;
        cell_above = $($this.parent().prev().children()[col]);

        //look for cells one above another with the same text
        while(cell_above.text()=== txt){                    //if the text is the same
            span+=1;                                        //increase the span
            cell_above_old = cell_above;                    //store this cell
            cell_above = $(cell_above.parent().prev().children()[col]);    //and go to the next cell above
        }
        
        //if there are at least two columns with the same value, set a new span to the first and hide the other
        if(span>1) {
            console.log(span);
            $(cell_above_old).attr('rowspan',span); 
            $this.hide();
        }              
    }
});