Forced CSS rule via Javascript is partially applied

Question

I've this following HTML:

<li id="telephone"><a href="tel:938409"target="_blank"><img  src="https://playground.air-srl.com/icombanner/telico.png"/></a></li>
                    <li id="ico"><a href="./cmbmodal.php?servizio=TEST" target="_blank"><img src="https://playground.air-srl.com/icombanner/cmbico.png"/></a></li>
                    <li id="status"></li>
                    <li  id="icon"><a href="https://m.me/xxxx/" target="_blank"><img src="https://playground.air-srl.com/icombanner/fbico.png"/></a></li>

                    <li id="icon">
                        <a href="https://api.whatsapp.com/send?phone=03480224&text=Buongiorno, sono interessato alla vostra offerta." target="_blank">
                            <img src="https://playground.air-srl.com/icombanner/whaico.png"/>
                        </a>
                    </li>

On a "onload" JS Function, I'm forcing the CSS in this way:

document.getElementById("telephone").style="display: block";
                        document.getElementById("icon").style="display: block";
                        document.getElementById("status").style="display: block";

The result is that I've three "icon" elements as you can see, but onlythe first has this forced stye rule applied.

Any suggestion about why isn't it completely applied?

Answer 1

give your icons a class instead of id (ids must be unique in the DOM). class="icon" then

var icons = document.getElementsByClassName('icon');
Array.prototype.forEach.call(icons, function(icon){
  icon.style.display = "block";
});

document.getElementsByClassName() returns an array-like object of all child elements which have all of the given class names