Hi.
Yh, you wouldn't be able to use document.getElementsByClassName to select only one element when multiple(in your case two) elements share the same class name. You also wouldn't be able to use document.querySelector because when two or more elements have the same class name and you want to select them in your JS file you use document.querySelectorAll (which you used) or document.getElementsByClassName.
After using document.querySelectorAll if you log btnShare to your console, you'll see that you now have a NODELIST which is similar to an ARRAY but is different in that you can't use array methods with it except the forEach method like you used.
So whenever a class name is shared with two or more elements you have a NODELIST(if you selected ALL using document.querySelectorAll) or an HTMLCollection(if you selected ALL using document.getElementByClassName) and if you try to add an eventListener to it, it wouldn't work simply because you should add an eventListener to a SINGLE element, it doesn't make sense to tell an ARRAY or a NODELIST or an HTMLCOLLECTION to listen for a click event,does it?
Using document.querySelector catches only the first element if there are multiple elements sharing that class name, normally it's only used for single elements. To select ALL elements having the same class name you use document.querySelectorAll or document.getElementsByClassName and loop through like you did using loops or any loop-like method like forEach.
NODELISTS and HTMLCOLLECTIONS can also be converted to an array using Array.from or by using the spread operator like this.
const newBtnShare = [...btnShare]
or using Array.from()
const newBtnShare= Array.from(btnShare)
newBtnShare is now an array and you can use your array methods.
Happy coding 🥂
