dynamically generate function in object

Hello,
I am trying to create a Bangle.js app for my gym training plan.
I have an interface for the app loader where I create the training plan, this is an Array of json objects.
Now I want to create a menu, where I can select a machine which has not been finished.

function showMenu(){
  function createMenuItems(){
    menuObjekt = {};
    menuObjekt[""] = {"title" : "machines left"};
    for (var i = 0; i < tempArray.length; i++){
      if (tempArray[i].finished == false){
        key = tempArray[i].machine;
                
        menuObjekt[key] = function(){showSettings(tempArray[i])};
      }
      
    }
    menuObjekt.Exit = function() { E.showMenu();};
    return menuObjekt;
  }
  
  var mainmenu = createMenuItems();
  console.log(mainmenu);
  E.showMenu(mainmenu);
}

The keys are shown correct, but the function to get the settings view does not work.
The output for consol.log(mainmenu); is:

{
  "": {
    "title": "machines left"
   },
  "machine 1": function () {showSettings(tempArray[i])},
  "machine 2": function () {showSettings(tempArray[i])},
  "machine 3": function () {showSettings(tempArray[i])},
  "Exit": function () {E.showMenu();}
 }

Why is the index not replaced?
I tried a lot of stuff, but don't understand my problem.
Neither my programming skills nor my English are very good, so I don't get the problem.
The web ide is warning me, that functions declared within loops may lead to confusing semantics, but I don't see another way?
There may be a different amount of machines I want to train, and I want only the machines to be in the machines I haven't finished.

Thank you in advance for your help and patience.
Tobi