How to do JS functions with PHP echo?

I’m trying to create a popout menu for an array of values that are echoed from the database. On the click of the svg, the popout menu that corresponds with the svg in the echo, needs to be shown. Except so far, it only works for the first one that is echoed. How to I fix it so that it show the popout that corresponds with the correct svg. Here’s what I’ve currently got :

PHP/HTML :

echo('
    <svg class="option-3" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M9 10.5C9.82843 10.5 10.5 9.82843 10.5 9C10.5 8.17157 9.82843 7.5 9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82843 8.17157 10.5 9 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M15 10.5C15.8284 10.5 16.5 9.82843 16.5 9C16.5 8.17157 15.8284 7.5 15 7.5C14.1716 7.5 13.5 8.17157 13.5 9C13.5 9.82843 14.1716 10.5 15 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill-rule="evenodd" clip-rule="evenodd" d="M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>  
    <div class="menu-option-popout"></div>
');

JS :

document.querySelector(".option-3").addEventListener("click", function(){
    document.querySelector(".menu-option-popout").style.display = "block";
});

Answer

If each popout <div> appears immediately after its corresponding <svg> tag (as in your example), you can take advantage of the .nextElementSibling property to get the <div> that follows the <svg> that was clicked.

At the end of your HTML:

<script>
// Add an event listener to each .option-3 element:
document.querySelectorAll('.option-3').forEach(item => {
  item.addEventListener('click', event => {
    let popout = event.target.nextElementSibling; // This element's next element (a .menu-option-popout)
    popout.style.display = 'block'; // Show the popout
  })
})
</script>

Advertisement

Answer