For Loop in Javascript (document.getElementById)

It's probably throwing an error on the first iteration because hoverinv0 does not exist. You want

for (var x = 1; x < 11; x++) {
  document.getElementById("hoverinv" + x).style.display="";
}

Your first code starts with "hoverinv1" and in your loop you start with "hoverinv0".

Probably, it is not finding the element, returning undefined and then your script crashes when you try to access style property.

Check the browser's console, it should emit an error or something.

Do it simply in CSS:

[id^=hoverinv] {
  display: block; /* or any other needed display value */
}

Your issue: by inspecting your JS in Console you can clearly see that it breaks while fetching your hoverinv0 ID element (does not exists).

What you can:

assign a class class="hoverinv" to all your element and go for:

var hoverInv = document.getElementsByClassName("hoverinv");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

or using

var hoverInv = document.querySelectorAll("[id^=hoverinv]");
for (var i=0; i<hoverInv.length; i++){
     hoverInv[i].style.display = "";
}

or something you might go fix all over again as soon you change the number of elements:

for(var i=1; i<11; i++){
   document.getElementById("hoverinv"+ i).style.display = "";
}