How do I step by parameter in "literal template" the name of a specific property of an object in Javascript?

Question

My question is this: I intend to eliminate a specific object through a property tech which I defined, which stores the technology as I add through an HTML form.

I created an empty array const myArray = [] that adds the objects.

In the code line below add to the array the object with the properties tech and Exp.

myArray.push({tech: technology, exp: experience});

In the code line below I am trying to pass parameter in literal template ${technology} the name of my technology for a function called popUpDelete().

buttonDelete.innerHTML = '<button id="btn-removeInfo" onclick="popUpDelete(`${technology}`);" type="submit">Delete</button>';

In the function below I get my literal template ${technology} that has been passed by parameter and step again that same parameter for the function btnRemoveInfo(technology).

function popUpDelete(technology){
  let idDelete = document.getElementById('pop-up-container');
  if(idDelete){
    idDelete.classList.add('show');
    idDelete.addEventListener('click', (e) => {
      if(e.target.className == 'btn-delete'){
        btnRemoveInfo(technology);
        idDelete.classList.remove('show');
      }else if (e.target.className == 'btn-cancel'){
        idDelete.classList.remove('show');
      }else if(e.target.id == 'close' || e.target == idDelete){
        idDelete.classList.remove('show');
      }
    });
  }
}

Only when this parameter reaches this function btnRemoveInfo(technology) is that I intend to eliminate the object that contains the specific name that I want to eliminate.

function btnRemoveInfo(technology){
  let indexDoObjeto;
  myArray.forEach((technology, index) => {
    if(technology.tech === technology){
      indexDoObjeto = index;
      roles.splice(indexDoObjeto, 1);
    }
  });
}

The problem is that by going through literal template my technology he will take over: [Object Htmlinputelement]