JSFiddle - React, Tailwind, and code Playground
by Jeff
HTML
<div class="container">
<br/>
<div class="row">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="media" id="tal1">
<div class="pull-left">
<a href="#">
<img class="media-object" src="https://placehold.it/64x64"/>
</a>
</div>
<div class="media-body">
<span class="media-heading">
<strong>Talent Name 1</strong>
<a href="#" data-id="#tal1" data-toggle="modal" data-target="#talentModal"><span class="glyphicon glyphicon-edit"></span></a>
</span>
<p>Description of the talent with <mark>emphesis</mark> on <code><em></code> tags.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div class="media" id="tal2">
<div class="pull-left">
<a href="#">
<img class="media-object" src="https://placehold.it/64x64"/>
</a>
</div>
<div class="media-body">
<span class="media-heading">
<strong>Talent Name 2</strong>
<a href="#" data-id="#tal2" data-toggle="modal" data-target="#talentModal"><span class="glyphicon glyphicon-edit"></span></a>
</span>
<p>Description of talent 2</p>
</div>
</div>
</div>
...
JavaScript
$('#talentModal').on('show.bs.modal', function(e){
var id = $(e.relatedTarget).data("id"),
$talent = $(id);
$("#editName").val($talent.find("strong").text());
$("#editIcon").val($talent.find("img").attr("src"));
$("#editDesc").val($talent.find("p").text());
});