Place a checkbox in between of 2 rows jquery MVC

I have a MVC web app in which I show a table. Some of my rows can have a similar id, on which I need to show only one checkbox for all those rows, and individual checkboxes for the rows which don't have a matching id. Something like below:

row1 and row2 have the same id, hence the checkbox is in between them (denoted by red checkbox). row3, row4 have different ids, hence they need to have their individual checkboxes (denoted by green).

I know I need to play on the rowspan property, but I am unable to visualize how to get on it.

Below is the sample code:

[Route("Search")]
[HttpGet]
public async Task<IActionResult> Search()
{
 //Some API call
 return View("Search", model);
}

View Code:

<table id="tblsearch">
 @if (Model.HasRecords)
 {
 var counter = 0;
 <tbody>
  @foreach (var item in Model.SearchResults)
   {
   <tr>                           
      <td>
          <input type="checkbox" id="Dummy_@counter" name="chkSearch" data-id="@item.Id"/>
            <label for="Dummy_@counter"></label>
       </td>
       <td>@item.FullAddress</td>
       <td>@item.Price</td>
        <td>@item.OfficeName</td>
     }
      else
      {
       <tr><td>Data Not Found</td></tr>
       }
     </table>

I am trying to first hide all the checkboxes, then trying to match the id's in each row, and then if the ids of 2 rows are same, I am trying to increase the rowspan by 2.

js code:

function pageLoad()
    {
        var rowCount = $('#tblSearch >tbody >tr').length;
        for(var i=0;i<rowCount-1;i++)
        {
            $('#Dummy_' + i).hide();
        }
        var searchArray= [];
        for (var i = 0; i < rowCount - 1; i++) {
            searchArray[i]= $('#tblSearch >tbody >tr')[i].attr('data-id');
        }        
    }

Please guide how to proceed.