Javascript - Uncaught TypeError: Cannot read properties of undefined at onclick

Question

I have a tab element in HTML that list data from 2 json files that looks like the following:

json1.json

{
    "title" : "json1 title",
    "json1_data" : 
    [
        {
            "info1": "AAA",
            "info2": "BBB"
        },
         *more elements here*
        {
            "info1": "YYY",
            "info2": "ZZZ"
        }
    ]
}

json2.json

{
    "title" : "json2 title",
    "json2_data" : 
    [
        {
            "info1": "111",
            "info2": "222"
        },
         *more elements here*
        {
            "info1": "333",
            "info2": "444"
        }
    ]
}

These 2 json files contain json1_data and json2_data respectively that has the same structure (that is, with indices info1 and info2). So, I created "common" functions to process these json data.

async function fetchData(path){
    // try fetch object from json file
    try {
        let response = await fetch(path);
        return response.json();
    } catch (error) {
        console.log(error);
    }
}


async function fetchJson1(){
    let myData = await fetch('json1.json'); 
    return myData.json1_data;
}

async function fetchJson2(){
    let myData = await fetch('json2.json'); 
    return myData.json2_data;
}

async function myFunction(idx){
    let i;
    let listObj;

    if(idx==1){
        listObj = await fetchJson1();
    }else{
        listObj = await fetchJson2();
    }

    let tabContent = document.getElementById("tab" + idx);

    let container = document.createElement("div");
    for(i=0; i<listObj.length, i++){
        let infoRow= document.createElement("div");
        let info1 = document.createElement("span");

        // display info1
        info1.innerText = listObj[i].info1;
        
        // test if info2 read is OK
        console.log("outside: " + listObj[i].info2);

        // add onclick action to info1
        info1.onclick = function(){
            // test if info2 read is OK
            console.log("inside: " + listObj[i].info2);  <-- problem part
        }

        infoRow.appendChild(info1);
        container.appendChild(infoRow);
    }
    tabContent.appendChild(container);    
}

HTML file looks like the following:

index.html

<button id="btn1" onclick="myFunction(1)"> Show json1 content </button>
<button id="btn2" onclick="myFunction(2)"> Show json2 content </button>
<div id="tab1">
<div id="tab2">
<script>
    document.getElementById("btn1").click();
</script>

Basically there is no problem with the listing of objects both from json1.json and json2.json when either button is clicked. Moreover, "onclick" function for json2 works fine (displays "inside: ") in console. However, when I click on the display for json1, this onclick function does not work and says "Uncaught TypeError: Cannot read properties of undefined (reading 'info2') at info1Element.onclick". How come listObj[i].info2 is fine for "listObj = await fetchJson2()" but not for "listObj = await fetchJson1()"?

I verified there is no problem with both json files. I suspect it has something to do with the "common" listObj that can take 2 different arrays of objects (although they have the same structure). Any idea how to fix this? (if possible, exclude coding myFunction twice for each json file since there can be more json files)

I tried changing the position of the following:

    if(idx==1){
        listObj = await fetchJson2();
    }else{
        listObj = await fetchJson1();
    }

In this case, "onclick" function for json1 info1 works but the "onclick" function for json2 info1 did not.