I need to display unique elements of already binded data in that html table by using JQuery or JavaScript. Displaying unique value means that mearging the cells having same value in the rows. The table data is dynamic but the structure is fix.

So, here is given table:

Here, I need to merge the Red colored cells as shown below.

And the required table is:

So, I need to achieve this cell merging through Jquery or javascript. As this table is created with HTML table and the data is already binded in it. By using this binded data I need to achieve the reqiured table. I need to merge more columns like this.

I have tried some coding but it is not working correctly. The code is:

jQuery('tr.tblRow').each(function(i, obj)
{   
     current_name = jQuery(obj).text();

     var current_name_arr = current_name.split(/\t|\n| /);

     /* check for repeated names */
     if (current_name_arr[22] == last_selected_compNo)
     {
          jQuery("td.headingSpas:contains('" + current_name_arr[22] + "')").each(function(index, object) 
          {
                if (index == 0)
                {
                /* check if already has rowspan attribtue */
                row_span = jQuery(object).attr('rowspan') ? jQuery(object).attr('rowspan') : 1;

                /* add one */
                row_span++;

                /* include the new rowspan number  */
                jQuery(object).prop('rowspan', row_span);

           }
           else if(index < 2)
           {
                 /* delete the other first name cells */
                 jQuery(object).remove();
           }
        
       });
    }
}

Please help me.