JS pop-up for different items on page

Question

I'm trying to make a pop-up for each item in my app to select quantity.

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

I found this solution and tried it:

<div class="items">
    <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity()">
        <%= item.name %>
    </div>

    <div id="light" class="itemshowcontent">
        <p>Some content</p>
        <a href = "javascript:void(0)" onclick = "closeitemquantity()">Close</a>
    </div>

    <div id="fade" class="blackoverlay"></div>
</div>

where js:

<script>
    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'
    }
</script>

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

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

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

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

Should I stick to using classes? Or somehow use ID, within classes?

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

Any advice appreciated.

EDIT: Here are some images for what I'm doing. This is page with listed objects: These are the objects preloaded from DB shown in a list. When you click on any of them, this pop-up comes up: to select quantity. I'm developing in elixir and phoenix framework.

Answer 1

Give id to each item and move light and fade out from id and to class. Then, find light and fade by item id when click function is executed. See the following example.

 function getParent(itemChild) { // Get parent. var item = itemChild.parentElement; return item; } function itemquantity(itemChild) { var item = getParent(itemChild); // Get parent and it is the item. item.querySelector('.light').style.display='block'; // Find .light element as of item. item.querySelector('.fade').style.display='block'; // Find .fade element as of item. } function closeitemquantity(itemChild) { var item = getParent(getParent(itemChild)); // You have to get parent twice and that is the item. item.querySelector('.light').style.display='none'; // Find .light element as of item. item.querySelector('.fade').style.display='none'; // Find .fade element as of item. } 

 <div class="items" id="apple"> <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)"> Apple </div> <div class="light itemshowcontent"> <p>Red Apple</p> <a href = "javascript:void(0)" onclick = "closeitemquantity(this)">Close</a> </div> <div class="fade blackoverlay"></div> </div> <div class="items" id="banana"> <div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)"> Banana </div> <div class="light itemshowcontent"> <p>Yello Banana</p> <a href = "javascript:void(0)" onclick = "closeitemquantity(this)">Close</a> </div> <div class="fade blackoverlay"></div> </div>