How to give unique id to buttons in javascript

I need some help because I am a little stuck and I’m not sure what I am doing wrong.

I created a table with buttons in each row. I want to give each buttons a unique id. The id will be a JSONObject that I got from calling an API. Here is my code so far:

function display(data){

    var resultdiv = document.getElementById('resultdiv');
    var table = document.createElement('TABLE');
    table.style.margin = "auto";

    var tbody = document.createElement('TBODY');
    table.appendChild(tbody);

        for (var i=0; i<10; i++){

        var store_is = "Closed";
        if (data.businesses[i].is_closed == false){
            store_is = "Open";
        }
        
        var tr = document.createElement('TR');
        var td1 = document.createElement('TD');
        var td2 = document.createElement('TD');
        var td3 = document.createElement('TD');
        var td4 = document.createElement('TD');

        var img = document.createElement("img");
        img.src = data.businesses[i].image_url;
        img.style.width = "100px";
        img.style.height="100px";

        var btn = document.createElement('button');
        btn.innerHTML = "<i class='fas fa-angle-double-right' style='color:#7E3131;'></i>";
        btn.style.borderRadius="8px";
        btn.style.backgroundColor="#F0B27A";
        btn.style.borderColor="#F0B27A";
        btn.style.marginLeft="5px;"
        btn.id = data.businesses[i].id;

        td1.appendChild(img);
        td2.appendChild(document.createTextNode(data.businesses[i].name));
        td3.appendChild(document.createTextNode(store_is));
        td4.appendChild(btn);

        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tbody.appendChild(tr);
   
    }
    resultdiv.appendChild(table);

    
    btn.addEventListener("click" ,function(){

        switch(btn.id){
            case data.businesses[0].id:
                alert(data.businesses[0].name);
                break;
            case data.businesses[1].id:
                alert(data.businesses[1].name);
                break;
            case data.businesses[2].id:
                alert(data.businesses[2].name);
                break;
            case data.businesses[3].id:
                alert(data.businesses[3].name);
                break;
            case data.businesses[4].id:
                alert(data.businesses[4].name);
                break;
            case data.businesses[5].id:
                alert(data.businesses[5].name);
                break;
            case data.businesses[6].id:
                alert(data.businesses[6].name);
                break;
            case data.businesses[7].id:
                alert(data.businesses[7].name);
                break;
            case data.businesses[8].id:
                alert(data.businesses[8].name);
                break;
            case data.businesses[9].id:
                alert(data.businesses[9].name);
                break;
            default:
                alert("Error Sorry");
        }

    })
    
}

Now, I also want to have an EventListener that when I click a button, the id that is assigned to it will alert. The problem I have all the button does not work but only the last button which has the id data.businesses[9].id When I add the event listener inside the loop all buttons work but the alert for all buttons is data.businesses[9].id as well.

Not sure how to make this one work. Any help will be appreciated! Thank you so much in advance!

Answer

Move the event listener for btn inside the for loop, and instead of using var in the for loop, using let like this:

for (let i=0; i<10; i++){

    //your codes

}

As @Elan has mentioned, you ran into the problem with closures in Javascript. This is for your reference: https://www.w3schools.com/js/js_function_closures.asp