JS pop-up for different items on page
<p>I'm trying to make a pop-up for each item in my app to select quantity.</p>

<p>So it preloads several items on page, and I need to make it show pop-up when clicked on any of them. </p>

<p>I found this solution and tried it:</p>

<pre><code>&lt;div class="items"&gt;
    &lt;div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity()"&gt;
        &lt;%= item.name %&gt;
    &lt;/div&gt;

    &lt;div id="light" class="itemshowcontent"&gt;
        &lt;p&gt;Some content&lt;/p&gt;
        &lt;a href = "javascript:void(0)" onclick = "closeitemquantity()"&gt;Close&lt;/a&gt;
    &lt;/div&gt;

    &lt;div id="fade" class="blackoverlay"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>where js: </p>

<pre><code>&lt;script&gt;
    function itemquantity() {
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeitemquantity() {
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
&lt;/script&gt;
</code></pre>

<p>It works, however when I select quantity, it always selects it only for the first item that comes.</p>

<p>If click on second item (or any other), the pop-up is still for the first one.</p>

<p>I believe this is because I use getElementById, as ID is used for only one object.</p>

<p>I tried changing to getElementsByClassName, but then it doesn't work at all. So, my question is how to make it work?</p>

<p>Should I stick to using classes? Or somehow use ID, within classes?</p>

<p>I apologise if it's simple question, I'm not really familiar with JS. </p>

<p>Any advice appreciated. </p>

<p>EDIT: 
Here are some images for what I'm doing. This is page with listed objects:
<a href="https://i.stack.imgur.com/0D144.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0D144.png" alt="Objects preloaded"></a>
These are the objects preloaded from DB shown in a list. When you click on any of them, this pop-up comes up:
<a href="https://i.stack.imgur.com/bu8Gy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bu8Gy.png" alt="enter image description here"></a>
to select quantity. 
I'm developing in elixir and phoenix framework. </p>