How Can I? Set foo.style.display where foo is the element name based on a js variable rising in increments

I have my program set up so that it autogenerates HTMl and places it into the webpage. Each introduction of new HTMl is given a new ID following along which increment it is at e.g <div id = "genQuestion0"> <div id = "genQuestion1">etc.

The inital div’s have all been set through CSS as no display

[id^="genQuestion"]{
    text-align: center;
    display: none;
} 

The first question id = genQuestion0 has been set that upon generation its display is set to block.

How can I make it so that when a button is pressed the previous questions display is changed to none and the next one is set to block.

This is what I have currently for my function but it does not work.

var countclicks = 0;

const nextQuestion = () =>{
  var elementName = `genQuestion${countclicks}`;
  var elementNameNeg = `genQuestion${(countclicks - 1)}`;
  elementName.style.display = "block";
  elementNameNeg.style.display = "none";
  countClicks ++;

}