JSFiddle - React, Tailwind, and code Playground

HTML

<table width="300px" height="150px" border="1">
    <tr>
        <th>Key</th>
        <th>Value</th>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valaa">AA</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valbb">BB</td>
    </tr>
    <tr>
        <td data-id="key1">data&nbsp;&nbsp;&nbsp;1</td>
        <td data-id="valcc">CC</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valdd">DD</td>
    </tr>
    <tr>
        <td data-id="key2">data&nbsp;&nbsp;&nbsp;2</td>
        <td data-id="valee">EE</td>
    </tr>
    <tr>
        <td data-id="key3">data&nbsp;&nbsp;&nbsp;3</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key4">data&nbsp;&nbsp;&nbsp;4</td>
        <td data-id="valff">FF</td>
    </tr>
    <tr>
        <td data-id="key5">data&nbsp;&nbsp;&nbsp;5</td>
        <td data-id="valff">FF</td>
    </tr>
</table>
</td>
</tr>
<tr>
    <td colspan="3" style="padding-left: 0px; padding-right: 0px; padding-bottom: 0px"></td>
</tr>
</table>

JavaScript

//merge cells in key column
function mergerKey() {    
    
    // prevents the same attribute is used more than once Ip
    var idA = [];
    
    // finds all cells id column Key
    $('td[data-id^="key"]').each(function () {
        
        var id = $(this).attr('data-id');
         
        // prevents the same attribute is used more than once IIp
        if ($.inArray(id, idA) == -1) {
            idA.push(id);
            
            // finds all cells that have the same data-id attribute
            var $td = $('td[data-id="' + id + '"]');
            
            //counts the number of cells with the same data-id
            var count = $td.size();
            if (count > 1) {
                
                //If there is more than one
                //then merging                                
                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}

function mergerVal() {
    var idA = [];
    $('td[data-id^="val"]').each(function () {
        var id = $(this).attr('data-id');

        if ($.inArray(id, idA) == -1) {
            idA.push(id);
            var $td = $('td[data-id="' + id + '"]');
            var count = $td.size();
            if (count > 1) {                
                $td.not(":eq(0)").remove();
                $td.attr('rowspan', count);
            }
        }
    })
}

mergerKey();
mergerVal();