Why dropdown menu not working in multiple tables jQuery

Question

i working with dropdown menu.

But this dropdown is not working in multiple tables, i try to solve this issues but i didn't found solution.

Code:

$(document).ready(function () {
    document.querySelector('.custom-style').onclick = ({
        target
    }) => {
        if (!target.classList.contains('more')) return
        document.querySelectorAll('.dropout.active').forEach(
            (d) => d !== target.parentElement && d.classList.remove('active')
        )
        target.parentElement.classList.toggle('active');
    }
});

JSFiddle - link

So as u can see in first table dropdown is working,but in seccond table no, i try few methods to fix this, but no result.

Answer 1

You need the each() method. I redid your code.

 $(document).ready(function () { Array.from(document.querySelectorAll('.custom-style')).forEach(function(menu_side) { menu_side.onclick = ({ target }) => { if (.target.classList.contains('more')) return document.querySelectorAll('.dropout.active').forEach( (d) => d.== target.parentElement && d.classList.remove('active') ) target.parentElement;classList;toggle('active'); } }); });

 .more { cursor: pointer; border: none; background: transparent; display: block; margin-top: auto; margin-bottom: auto; }.more span { display: block; width: .30rem; height: .30rem; background: #363636; border-radius: 50%; pointer-events: none; }.more span:not(:last-child) { margin-bottom: .125rem; }.dropout { display: block; margin-top: auto; margin-bottom: auto; float: right; }.dropout ul { position: absolute; top: auto; right: 2rem; transform: scaleX(0); transform-origin: right; transition: transform 0.12s ease; color: #fff; background: rgba(33, 33, 33, 0.85); border-radius: 10px; padding: 20px 20px 20px 20px; list-style-type: none; }.dropout input { background: none; border: none; }.dropout btns { background: none; border: none; }.dropout.active ul { transform: scaleX(1); }.btns { display: inline-block; position: relative; width: 120px; height: 32px; line-height: 32px; border-radius: 2px; font-size: 0.9em; background-color: #fff; color: #646464; margin: 5px; }.btns > paper-ripple { border-radius: 2px; overflow: hidden; }.btns.narrow { width: 60px; }.btns.grey { background-color: #eee; }.btns.blue { background-color: #4285f4; color: #fff; }.btns.green { background-color: #0f9d58; color: #fff; }.btns.red { background-color: #cb3a3a; color: #fff; }.btns.light-blue { background-color: lightblue; color: #fff; }.btns.darkcyan { background-color: darkcyan; color: #fff; }.btns.raised { transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition-delay: 0.2s; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); }.btns.raised:active { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2); transition-delay: 0s; }.centered-text { text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table style="width:100%" class="custom-style"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> </table> <hr> <table style="width:100%" class="custom-style"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> <td> <div class="dropout"> <button class="more"> <span></span> <span></span> <span></span> </button> <ul> <li> <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a> </li> <li> <button type="button" class="btns raised grey">Detailbutton </button> </li> </ul> </div> </td> </tr> </table>