How to add class to div having same name on button click

Question

I want to add a class to a div on a button click, I have the below code, but I cannot get the jquery working correctly:

 $(document).ready(function() { $('.edit-btn').click(function() { $(this).closest('.edit-box').addClass('open'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

Clicking on the button will add a class to div ie .edit-box . So only on the clicked button will add class to relevant div.

Answer 1

Do I understand you correctly?

 $(document).ready(function() { $('.edit-btn').click(function() { //$('.edit-box').removeClass('open'); $(this).closest('.col').find('.edit-box').addClass('open'); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

Answer 2

This code adds the open class to the edit-box div that comes after the button that is clicked.

It works by finding the parent of the button (ie the flex-btn container div), then getting the next element that has the class edit-box .

To see it working below I've added a background colour to the .edit-box and .edit-box.open divs so you can see it changing when the button is clicked:

 $(document).ready(function() { $('.edit-btn').click(function() { $(this).parent().next('.edit-box').addClass('open'); }); });

 .edit-box { background: #ccffff; }.edit-box.open { background: #ccccff; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col account"> <strong>Account Settings</strong> <div class="col"> <span>Profile Status</span> <p>status</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 1 </div> </div> <div class="col"> <span>Name</span> <p> name</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 2 </div> </div> <div class="col"> <span>Username</span> <p>username</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 3 </div> </div> <div class="col"> <span>Bio</span> <p>bio</p> <div class="flex-btn front-btn"> <button class="edit-btn">edit</button> </div> <div class="edit-box"> edit 4 </div> </div> </div>

Answer 3

Personally, I would add this to all of the divs that wrap around the buttons:

onclick="this.nextElementSibling.classList.add('open');"

That's not what you asked though, so here is how to get your thing working (using vanilla javascript):

document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener("mouseup", () => {
                button.parentElement.nextElementSibling.classList.add("open")
            })
        })