You need to understand the difference between the following concepts:
As others already have mentioned, IDs have to be unique on your page. You can read more about why here.
In short: Selecting via ID will always return ONE element, no matter if you use getElementById or querySelectorAll. What might be confusing is, that CSS does not care and will always apply the style to all elements with the same ID. You can check the following snippet and play around with the concept:
https://jsfiddle.net/wt6sna8c/2/
Classes however can be reused however often you want.
You can read more about when to use classes and when to use IDs here.
Classes are always selected with a prefix of .. Meaning if you want to select an element with the class "myclass" you would need .myclass as the CSS selector. IDs on the other hand are selected with the prefix #. In your example the selector for ONE element with the id="ss" would be #ss.
These CSS selectors are also used in JavaScript code. The function, that you use, document.querySelectorAll("..."); takes a CSS selector as an argument and returns all matching elements. However, as mentioned, since IDs have to be unique it will always return 0-1 elements if you select via ID, even if you use the function select all.
To fix your code just replace the assignment of id="ss" to class="ss" and use the correct selector prefix in your JS. Here is how that would look like:
https://jsfiddle.net/ma2v1h4n/1
I advise you to play around with selectors and read up on it a bit yourself so you properly understand the concept.
Edit:
As @trincot correctly mentioned your current code actually looks for <ss> tags. Maybe, with that information, you could tell me how you could make the code run as expected without using classes or ids?