JSFiddle - React, Tailwind, and code Playground

by Sascha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-6">
    <button data-val="p1">P1</button>
    <div class="card">
      <div class="card-body">
        <span>
          Data for P1
        </span>
      </div>
    </div>
    <button data-val="p2">P2</button>
    <div class="card">
      <div class="card-body">
        <span>
          Data for P2
        </span>
      </div>
    </div>
    <button data-val="p3">P3</button>
    <div class="card">
      <div class="card-body">
        <span>
          Data for P3
        </span>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="second">
      <div class="card">
        <div class="card-body">
          <span>
            TEXT SHOULD BE DISPLAYED HERE
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.card-body {
  padding: 5px;
  background-color: #eef;
}

.card-body span {
  background-color: #ccc;
}

JavaScript

$('.col-lg-6 button').on('click', function() {
    $('.second .card').html($(this).next().html());
})