JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expandable-panel-heading">
     <h2>
                 <a id="ancherComplaint" href="#addComplaint">ABC</a>
             </h2>

</div>

CSS

h2, p, ol, ul, li {
    margin:0px;
    padding:0px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
}
ol, ul {
    padding:3px 0 10px 22px;
}
li {
    padding:0 0 4px 0;
}
hr {
    border:none;
    height:1px;
    border-top:1px dashed #999;
}
#container {
    width:922px;
    /*margin:auto;*/
    margin-top:140px;
    margin-left:auto;
    margin-right:auto;
}
.expandable-panel {
    width:100%;
    position:relative;
    overflow:auto;
    margin-bottom: 2px;
    border:1px solid #D2E7FC;
}
.expandable-panel-heading {
    width:100%;
    cursor:pointer;
    clear:both;
    background-color:#D2E7FC;
    position:relative;
}
.expandable-panel-heading:hover {
    color:#666;
}
.expandable-panel-heading h2 {
    padding:5px 10px 0px 15px;
    font-size:13px;
    /*line-height:20px;*/
}
.expandable-panel-content {
    width:95%;
    padding:0 15px 0 15px;
    /*margin-top:-999px;*/
    overflow:auto;
}
.expandable-panel-content p {
    padding:4px 0 6px 0;
}
.expandable-panel-content p:first-child {
    padding-top:10px;
}
.expandable-panel-content p:last-child {
    padding-bottom:15px;
}
.icon-close-open {
    width:20px;
    height:20px;
    position:absolute;
    background-image: url(../images/cencel_a2.png);
    background-repeat:no-repeat;
    /*url(icon-close_16.png);*/
    right:15px;
}
.expandable-panel-content img {
    float:right;
    padding-left:12px;
    clear:both;
}
.header-active {
    background-color:#D0D7F3;
}

JavaScript

$('.expandable-panel-heading').click(function (evt) {
    if (evt.target.tagName != "A") {
        alert('123');
    }
});

$("#ancherComplaint").click(function () {
    alert($(this).attr("id"));
});