How to use JavaScript to add IDs to multiple elements?

See more:

Javascript

CSS

HTML

I cannot seem to figure out the solution to my problem. Through intense several days of research I've concluded this stack overflow question is similar and may be a solution (http://stackoverflow.com/questions/14408891/getelementbyid-multiple-ids), but with all my trials I still can't seem to implement the solution to my code. http://codepen.io/anon/pen/BNvobY[^]. I've asked the same question many times with variations, but I still keep getting broad answers that never help at all. **My question is**, How can I create multiple ID'S from the script to perform several open-transitons?

***Though I figured out specifically.***

var bodyEl = document.body,
content = document.querySelector('.content-wrap'),
openbtn = document.getElementById('open-button'),
closebtn = document.getElementById('close-button'),
isOpen = false;

They are two buttons shown as three gray dots if you scroll towards the middle of the result screen. The first set of gray dots will open two black boxes. **I do not want that**. I would **only** like the first set of gray dots to **only** open the first box, the second set of gray dots to **only** open the second box, and so on.

I figured this portion of the javascript was what was needed to be altered in order to achieve this, though like I said before I cannot seem to implement the solution. Can some **very bright mind** help me figure this out! no advice please!, just a straight forward answer which solves the problem!