JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" post="101" class="triggerLoad" id="section101">See all comments</a>

<div
id="commentsection101">
    <div id="comment1">comment 1</div>
    <div class='hidden' id='hidden1'>hidden 1</div>
    <div id="comment2">comment 2</div>
    </div>

CSS

div.hidden {
    display: none;
}

JavaScript

function loadSection(sectionID) {
    // get simulated data from server
    var data = "<div id='comment1'>comment 1 testing delegated triggered events</div><div id='comment2'>comment 2 after html inserts by server</div><div id='comment3'>comment 3<a href='#' post='3' class='triggerShow' id='show3'>Show hidden div 3</a></div><div id='comment4'>comment 4 <a href='#' post='4' class='triggerShow' id='show4'>Show hidden div 4</a></div><div class='hidden' id='hidden3'>hidden 3 Woo hoo! It works!</div><div class='hidden' id='hidden4'>hidden 4 Finally!</div>";
    $(sectionID).empty(); // clear old commentsection
    $(sectionID).append(data); // post new comment section
}

$(function () {  // get target id
    $('a.triggerLoad').click(function () {
        var currentID = $(this).attr('id');
        var targetID = 'div#comment' + currentID;
        loadSection(targetID);
    }); //   click
}); //ready

$(document).on("click", function () {  // event handler for on click
    $('a.triggerShow').click(function () {
        var post = $(this).attr('post');
        var targetID = 'div#hidden' + post;
        $(targetID).show();
        return false;
    }); //click
}); //ready