JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="data">

<div class='card-container' data-card-id='1'>
  <div class='card-header' data-card-id='1'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='1'>
    <div class='data'>
      Body 1
    </div>
  </div>
</div>

<div class='card-container' data-card-id='2'>
  <div class='card-header' data-card-id='2'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='2'>
    <div class='data'>
      Body 2
    </div>
  </div>
</div>

<div class='card-container' data-card-id='3'>
  <div class='card-header' data-card-id='3'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='3'>
    <div class='data'>
      Body 3
    </div>
  </div>
</div>

<div class='card-container' data-card-id='4'>
  <div class='card-header' data-card-id='4'>
    Header
  </div>
  <div class='card-body collapse' data-card-id='4'>
    <div class='data'>
      Body 4
    </div>
  </div>
</div>
</div>

CSS

.data{
  display: flex;
}

JavaScript

$('.card-container').on('click', function(event) {
	var id = $(this).data('card-id')
	$('.card-body[data-card-id="' + id + '"]').toggle()
})