I have a modal where list of title are displayed at left panel and its subcomponents are displayed at right side. This is the code, which will fetch all data in single array.

Array

[
    0 => [
        "title" => 'Title A',
        ....
        "subComponents" => [
        ]
    ],
    1 => [
        "title" => 'Title B',
        ....
        "subComponents" => [
        ]
    ]
]

Modal

$.post(url, {identification: identification}, function (res) {
    let parsedResponse = JSON.parse(res);
    $(".items-body").html('');
    $(".level-wrapper-right-up").html('');

    if (parsedResponse.success) {
        let records = parsedResponse.data;

        for (let j = 0; j < records.length; j++) {
            itemBodyContent.push("<div class='items-body-content left-heading'><span>" + records[j].title + "</span></div>");
        }

        levelWrapperRightUp.push("<div class='title'>" + records[0].heading + records[0].title + "</div>");
    }
    $(".items-body").html(itemBodyContent.join(''));
    $(".level-wrapper-right-up").html(levelWrapperRightUp.join(''));
});

$("#componentModal").modal();

Now when I make selection on title, its sub-components must also change.

$(".items-body").on("click", "div.left-heading", function() {
    alert($(this).text());
});

Since all my required data are already inside records. Is it possible to fetch on div.left-heading click without calling the POST method ?