JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">

  <div class="row">

    <div class="col-xs-4">
      <div class="emp-details">
        <p class="ename">Raju Rastogi</p>
        <p class="edesignation">UI Designer</p>
        <a href="javascript:;" class="more-info">More...</a>
      </div>
    </div>

    <div class="col-xs-4">
      <div class="emp-details">
        <p class="ename">Pawan Pandey</p>
        <p class="edesignation">Java Developer</p>
        <a href="javascript:;" class="more-info">More...</a>
      </div>
    </div>

  </div>

</div>



<div id="info-container">

  <div class="panel panel-primary">
    <div class="panel-heading">Employee info</div>
    <div class="panel-body">
      <p>Name : <span id="empname">{ Employee name }</span></p>
      <p>Designation : <span id="designation">{ Designation }</span></p>
    </div>
  </div>

</div>

CSS

a{text-decoration:none;color:#1C90F3;}
a:hover{text-decoration:underline;}
#info-container{display:none;margin:50px;}
h5{margin:0;padding:0;}
.emp-details{padding:5px;background:#fff;border:1px solid #999;}
p span{font-weight:bold;}
.container{margin-top:20px;}

JavaScript

$(document).ready(function(){
	var empName = $(this).closest('.emp-details').find('.ename').text();
  var empDesignation = $(this).closest('.emp-details').find('.edesignation').text();
  $('.more-info').on('click', function(){
  	$('#info-container').show();
    $('#info-container #empname').text(empName);
    $('#info-container #designation').text(empDesignation);
  })

})