An array of images and a for loop display the buttons. How to assign each button to open its own block by name?

Question

I'm making my first game in Twine. I'm trying to figure out JS. I immediately apologize for the code in my examples, because... Twine has slightly modified HTML, but I don’t know how to write it correctly in pure HTML, so I copied it directly from the project. Everything in it is correct and works, but in an excerpt and in pure HTML form as here, most likely it will not work. But I threw it off so that I could follow the logic to write the correct JS. Sorry about that! Now to the question... I'm making a gaming phone. There is an array of icons. Using a for loop, I display the universal buttons in the grid. Only the icons in them change relative to the iteration of the loop and the array. The names of the icons correspond to the Ids of the blocks, for example foto.svg - fotoApp. This is implemented in such a way that by adding the next application icon to the array and creating the corresponding block, the JS logic works regardless of the number of applications (images in the array). I was able to implement the function of opening itself (opening the application occurs as in a real phone, overlapping the desktop with an open application) and opening each button, but they all open as before the first test block - “messengerApp” and so far without reference to names. I perform the discovery by adding the class "active" and "activeNow", replacing them and deleting them, I was able to implement the "return" button. Actually, the task is to ensure that each button opens only its own application foto - fotoApp, phone - phoneApp, etc. I thought that somehow it was necessary to take the name of the icon and substitute it in a button in which Id = "App", so that the total would be foto.svg -> foto+App=fotoApp and the block with this ID would receive the class "activeNow" thereby opening up. Preferably without changing the existing structure too much. Help me please!

<div class = "phone">
  <div class = "appBtns">
      for (let i = 0; i < setup.appButtonsList.length; i++) {                                                                                           
            <span id="gridItem">
                  <button id="App" class="appButton open__app">[img[setup.appButtonsList[_i]]]
                  </button>
            </span>
      }
  </div>

<div class = "messengerApp content__app"> 
</div>
<div class = "phoneApp content__app"> 
</div>
<div class = "fotoApp content__app"> 
</div>
<div class = "browserApp content__app"> 
</div>


<div class = "phoneBtns"> 
    <span  id='appLast' class="phone-button" ><<button [img[assets/img/phone/phoneBtns/lastApp.svg]]>><</button>></span>
    <span  id='appHome' class="phone-button close__app" ><<button [img[assets/img/phone/phoneBtns/homeApp.svg]]>><</button>></span>
    <span  id='appReturn' class="phone-button return__app" ><<button [img[assets/img/phone/phoneBtns/returnApp.svg]]>><</button>></span>
</div>

  </div>

.content__app {
  display: none;
}
.content__appChat {
  display: none;
}

.content__app.active {
  display: flex;
}
.content__app.activeNow {
  display: flex;
}

.content__appChat.active {
  display: flex;
}
.content__appChat.activeNow {
  display: flex;
}

.phone {
    display:flex;
    position: relative;
    flex-direction:column;
    justify-content: flex-start;
    width: 232px;
    z-index:1;
    border-radius: 30px;
    overflow: hidden;
    height: 514px;
    z-index: 1;
    background-color: blue;
}


#appButtons{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 0.3fr 1fr;
    grid-template-areas:
        "6 6 6 6"
        "5 5 5 5"
        "4 4 4 4"
        "3 3 3 image"
        "upArrow upArrow upArrow upArrow"
        "phone internet sms foto";
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    justify-items: center;
    align-items: center;
    padding: 40px 10px 0px 10px;
    z-index: 2;
}
#appButtons img {
    width: 40px;
}
#gridItem {
    width: 40px;
    height:40px;
}

.messengerApp{
    position: relative;
    flex-direction:column;
    justify-content: flex-start;
    width: 232px;
    z-index:1;
    border-radius: 30px;
    overflow: hidden;
    height: 514px;
    z-index: 1;
    background-color: green;
}

.fotoApp{
    position: relative;
    flex-direction:column;
    justify-content: flex-start;
    width: 232px;
    z-index:1;
    border-radius: 30px;
    overflow: hidden;
    height: 514px;
    z-index: 1;
    background-color: red;
}

.browserApp{
    position: relative;
    flex-direction:column;
    justify-content: flex-start;
    width: 232px;
    z-index:1;
    border-radius: 30px;
    overflow: hidden;
    height: 514px;
    z-index: 1;
    background-color: black;
}

.phoneApp{
    position: relative;
    flex-direction:column;
    justify-content: flex-start;
    width: 232px;
    z-index:1;
    border-radius: 30px;
    overflow: hidden;
    height: 514px;
    z-index: 1;
    background-color: yellow;
}

let setup.appButtonsList = ['assets/img/phone/appBtns/foto.svg', 'assets/img/phone/appBtns/messenger.svg', 'assets/img/phone/appBtns/browser.svg', 'assets/img/phone/appBtns/phone.svg'];

let openApp = document.querySelectorAll('.open__app');
let openAppChat = document.querySelectorAll('.open__appChat');
let contentApp = document.querySelector('.content__app');
let contentAppChat = document.querySelector('.content__appChat');
let closeApp = document.querySelector('.close__app');
let returnApp = document.querySelector('.return__app');
let returnAppChat = document.querySelector('.messengerReturn');
const active = document.querySelector('.active');
const activeNow = document.querySelector('.activeNow');


openApp.forEach(open__app => {open__app.addEventListener('click', () => contentApp.classList.toggle('activeNow'));
});

openAppChat.forEach(open__appChat => {open__appChat.addEventListener('click', () => {contentApp.classList.replace('activeNow', 'active'); contentAppChat.classList.add('activeNow');
})
});

closeApp.addEventListener('click', () => {contentApp.classList.remove('active'); contentAppChat.classList.remove('activeNow');
});

returnApp.addEventListener('click', () => {contentAppChat.classList.remove('activeNow'); contentApp.classList.remove('activeNow'); contentApp.classList.replace('active', 'activeNow');
});

returnAppChat.addEventListener('click', () => {contentAppChat.classList.remove('activeNow');
});

I read a lot of examples on the Internet, where they open and close with one button, hide through “hidden”, through “template”, through a lister on buttons. But what I didn’t try didn’t fit mine, or I don’t know how to apply it all correctly.