JSFiddle - React, Tailwind, and code Playground

HTML

<table id = "table">
  <tr class = "expand-row">
    <td>Click to expand-1</td>
    <td>Click to expand-1</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>  
  <tr class = "expand-row">
    <td>Click to expand-2</td>
    <td>Click to expand-2</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-3</td>
    <td>Click to expand-3</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr> 
  <tr class = "expand-row">
    <td>Click to expand-4</td>
    <td>Click to expand-4</td>
  </tr>
  <tr class = "expand-data">
    <td colspan = "2">
      <br><br><br><br><br><br>
      <button class = "click-to-close">CLOSE</button>
    </td>
  </tr>   
</table>

CSS

#table{
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

#table tr{
  border-bottom: 1px solid black;
}

.expand-row{
  cursor: pointer;
}
.not-expand-row{
  cursor: not-allowed;
}
.expand-data{
  display: none;
}

JavaScript

$(function() {
	$('#table .expand-row').on('click', function(){
  	if(!$(this).hasClass('not-expand-row')){
  	  var index = $(this).index('#table .expand-row');
      $('#table .expand-data').eq(index).css('display', 'table-row');
    }
  });
  
 	$('#table .click-to-close').on('click', function(){
  	var index = $(this).index('#table .click-to-close');
    $('#table .expand-data').eq(index).css('display', 'none');
    $('#table .expand-row').eq(index).addClass('not-expand-row');
  });
});