loop through wordpress articles and add a css class with js

I hope you have a good day 🙂

I am working on a plugin currently. I would like to loop through all the articles: on click => open a popp-up, when the pop-up closes => show this content … My code only works for the first article. Sorry if that seems trivial to you, if you have links or tutorials to advise me, I am interested 🙂

Thank you !

function socialLocker() {
    let sl = document.querySelector(".ws-sl-container");
    let slc = document.querySelector(".ws-sl-content");

    document.querySelectorAll(".ws-sl-box-for-social-medias a").forEach(function(ele) {
        ele.onclick = function(e) {
            var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
            var check_window_close = setInterval(function() {
                if (web_window.closed) {
                    clearInterval(check_window_close);
                    sl.style.display = "none";
                    slc.style.display = "block";
                }
            }, 1000);
            e.preventDefault();
        };
    });
};

Answer

It seems to be a problem with selecting the elements in the document.

You can use next selector: https://api.jquery.com/next/ instead of selecting all and looping with foreach. With next, you will get the closest element.

Suppose all the posts in your list have a button with the class trigger and when clicked it shows a popup with the class of popup.

<script>
    jQuery(document).ready(function(){
        jQuery(".popup").hide(); /* hide all popups */
        jQuery(".trigger").click(function(){ /* when button is clicked */
            jQuery(this).next(".popup").slideToggle(); /* toggle the closest popup */
        });
    });
</script>

This way the click / action (you want to have it when closed) on (this) element will affect nearest element.