i have this div in my homepage.php file:

<?php foreach($posts as $post): ?>
   </div class="post>
            <div class="options">
                <div class="option"></div>
                <div class="option"></div>
                <div class="option"></div>
            </div>
            <div class="none editanddelete">
                <button type="button" class="edit">edit</button>
                <button type="button" class="delete">delete</button>

            </div>
            <div class="imageandname">
                <img src="<?php echo $post->user_image ?>">
                <div class="username"><?php echo $post->username ?></div>
            </div>
            <div class="post_body">
                <?php echo $post->post_body ?><br>

            </div>
   </div>
<?php endforeach; ?>

the $posts is array that is coming from database through controller and each time i publish a post, the body will add new div like above with the data needed from the $post array, now as shown above, the child div with class "editanddelete" is hidden by giving class "none" which is display:none; now with javascript i want to make an event where when i click on the child div with class="options", it toggles the "none" class of the child div with class="editanddelete", like the following:

post = document.querySelector('.post');
options = post.querySelector('.options');
editanddelete = options.querySelector('.editanddelete');

options.addEventListener('click', () => {
   editanddelete.classList.toggle('none');
})

when i execute this code, it works fine on the first post (div) that is dynamically created, but when i add another post, the event will not work on the second post div, i tried to use querySelectorAll and loop "options" classes that will be created dynamically, but it just does not work as expected and the event affects other divs, what i want is to make the event for all divs, every div on it's own

CodePudding user response：

You need to work with the same .editanddelete element as .options is clicked.

JS code could be like

var options = document.querySelector('.options');

// here maybe would be for cycle over options (I can't test it now)
options.addEventListener('click', () => {
   this.parentNode.querySelector('.editanddelete').classList.toggle('none');
})