JSFiddle - React, Tailwind, and code Playground

HTML

<div class="replymessage hidden" id="message1">content one</div>
<a href="#message1" class="reply">Reply</a>

<div class="replymessage hidden" id="message2">content two</div>
    <a href="#message2" class="reply">Reply</a>

<div class="replymessage hidden" id="message3">content three</div>
    <a href="#message3" class="reply">Reply</a>

<div class="replymessage hidden" id="message4">content four</div>
    <a href="#message4" class="reply">Reply</a>

CSS

.reply {
    display: block;
    background: #2d2d2d;
    color: #eee;
    text-decoration: none;
    padding: 5px 10px;
    margin: 2px 0;}

.replymessage {
    border: 1px solid #ddd;
    background: #eee;
    display: block;
    height: 300px;
    padding: 10px;}

.hidden { display: none; }

JavaScript

$('.reply').click( function () {
    var item =  $(this).attr('href');
    $(item).slideToggle(300);
 });