JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" value="Get data" />
<div id="showData"></div>

JavaScript

// Function to add an empty table with class names
var $addTable = function() {
    return $('<table><tr><td class ="name"></td></tr></table>');
}
    
// Fake simplified data to use instead of "data"    
var fakeData = ["Mary", "Bob", "Juane", "Austin", "Clementine", "Newt"];

$(function() {
    
    // The attribute = selector
    $("input[value='Get data']").click(function() {
        
        // Loading notice
        $("#showData").html("Loading...");
        
        // The AJAX call to get the data using POST
        $.post('/ajax_json_echo/', function(data) {
            
            // Clear loading notice
            $("#showData").html("");
            
            // Iterate through data
            //   and create a table for each item.            
            $.each(fakeData, function(index, value) {
                
                // This is the div's unique ID
                var $id = "data" + index;
                
                $addTable().attr("id", $id).appendTo("#showData");
                $("#" + $id).find(".name").html(value);
            });
        });
    });
});