JSFiddle - React, Tailwind, and code Playground

HTML

<style type="text/css">
   .bio-readMore {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:bold;
    font-style:italic;
    color:#ff6600;
    display:inline;    
    color:#0066cc;
    cursor:pointer;
}
.bio-readMore:visited {
    color:#0066cc;
}
.bio-readMore:hover {
    color:#F60;
}
.bio-readMore:active {
    color:#6e99d4;
}
    
#wrapper h1 {
    font:bold 18px Georgia, "Times New Roman", Times, serif;
    color:#333;
    padding-top:10px;
}
#wrapper h2 {
    font:bold 11px "Arial Black", Gadget, sans-serif;
    text-transform:uppercase;
    color:#0066cc;
}
#wrapper .aHidden,
#wrapper .bHidden,
#wrapper .cHidden
{
    display:none;
}
</style>

<div id="wrapper">
    <h1>title 1</h1>
    blah blah blah blah blah blah text
    <div id="aHidden" class="aHidden">some really long string of text that isn't using shown to the user</div>
    <div id="aBtn" class="bio-readMore">...read more</div>
    <br><br>

    <h1>title 2</h1>
    blah blah blah blah blah blah text
    <div id="bHidden" class="bHidden">another really long string of text that isn't using shown to the user</div>
    <div id="bBtn" class="bio-readMore">...read more</div>
    <br><br>

    <h1>title 3</h1>
    blah blah blah blah blah blah text
    <div id="cHidden" class="cHidden">last really long string of text that isn't using shown to the user</div>
    <div id="cBtn" class="bio-readMore">...read more</div>
    <br><br>
</div>

JavaScript

$(document).ready(function() {
    $("div").each(function(idx) {
        if ($(this).hasClass('bio-readMore')) {
            var thename = this.id.replace("Btn", "Hidden");
            var sel = "#" + thename;
            $(sel).click(function() {
                alert("running click for element with value " + this.id);
                if ($(this).is(":hidden")) {
                    $(this).slideDown("slow");
                } else {
                    $(this).slideUp();
                }
            });
        }
    });
});