JSFiddle - React, Tailwind, and code Playground

by Mark Evans

HTML

<div id="my_div">
    <button onclick="run_me()">click me</button>
</div>

JavaScript

function run_me() {
    console.log("make_array");
    add_divs(make_array());
}

function make_array() {
    var my_array = [];
    my_first_obj = {
        name: "ClickTheFirstOne",
        age: 24,
        callback_fn: function(div) {
            $(this).append("clicked first");
        }
    };
    my_array.push(my_first_obj);
    
    my_next_obj = {
        name: "ClickTheSecondOne",
        age: 42,
        callback_fn: function(div) {
            $(this).append("clicked second");
        }
    };
    my_array.push(my_next_obj);
    return my_array;
}

function add_divs(my_array)
{
    for (var i = 0; i < my_array.length ; i++) {
        var new_div = document.createElement("div");
        $(new_div).append("<div>" + my_array[i].name + ", " + my_array[i].age + "</div>");
        $(new_div).click( function() { my_array[i].callback_fn(this); } );
        $("#my_div").append(new_div);
    }
}