JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="panel panel-default">
  <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block parent-link" data-parent="#accordion" data-toggle="collapse" href="#collapseOne"></a>
  <h4 class="text-danger">
    <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseOne">Urgent</a>
  </h4>
      <h4 class="text-normal">
    <a class="panel-heading visible-xs-block visible-sm-block visible-md-block visible-lg-block" data-parent="#accordion" data-toggle="collapse" href="#collapseTwo">Normal</a>
  </h4>
</div>

CSS

.parent-link {
    border: solid 1px #000000;
    width: 200px;
    display: block;
    height: 20px;
}
H4 {
    display: block;
    margin: 0px;
}

JavaScript

$(function() {
    //Add a click event to each .panel-heading element below an H4
    //This could be removed for the code to run on page-load the references would simply need to be updated.
    $("H4").on("click", ".panel-heading", function(e, data) {
        var linkText = $(this).text(); // Get the text of the link we want
        var clonedNode = $(this).closest("H4").clone(); // Should grab the parent H4 of the hyperlink that was clicked and make a copy.
        clonedNode.html(""); // truncate the contents of the cloned node
        clonedNode.text(linkText); // Set the link text of the H4
        $(".panel").find(".parent-link").html(clonedNode);
    });
    
    //for no click event the logic is the same, but the selectors change.
});