JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <button class="info_loader" data-target="#target1">
        Kalle Karlsson, 19870214-1234
    </button>
    <div id="target1" class="target"></div>
</div>

<div>
    <button class="info_loader" data-target="#target2">
        Fia Fransson, 199101010001
    </button>
    <div id="target2" class="target"></div>
</div>

CSS

.target {
    border: 1px solid #eee;
    display: none;
}

JavaScript

$(function() {
    // sätt en funktion som hanterar 'click' event för
    // alla html-element som har klassen info_loader
    $(".info_loader").click(function(e){
        // hämta jquery ($) version av knappen
        var button = $(e.target);
        // kolla vilken div knappen har satt som mål
        var target = $(button.attr('data-target'));
        // kolla om vi redan hämtat data
        var data = target.attr('data-content');

        if (target.css('display') == 'none') {
            // visa rutan med extrainfo
            target.show()
            // kolla om data inte redan hämtats
            if (!data) {
                target.html('laddar...')
                // hämta lite fejkat userinfo
                var user = button.html();
                // gör ett ajax-anrop till jsfiddles
                // echo-funktion, som returnerar det man
                // skickar in i "html"-parametern, efter
                // delay sekunder
                $.ajax({
                    type: "POST",
                    url: '/echo/html/',
                    data: {html: 'Extra info om ' + user, delay: 3},
                    success: function(data){
                        // spara data så vi inte behöver
                        // hämta igen
                        target.attr('data-content', data);
                        // uppdatera rutan me extrainfo
                        target.html(data);
                    },
                    dataType: 'html'
                });
            }
        } else {
            target.hide()
        }
    })   
})