Pratham Pratham - 5 months ago 9
jQuery Question

Jquery event is fired for all button having same class name rather than current selected button

Basically when i click on first .menu-btn it should be called for only first .dropdown
please note this content is generated on the fly, so I can't use different ids for all



$(document).ready(function() {
$(".menu-btn").click(function() {
$(".dropdown").toggleClass('expand');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped">
<tr>
<th>&nbsp;</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
<tr>
<td>
<div class="mobile-nav" style="border:0px solid red">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>

<div class="dropdown">
<ul class="list">
<li>
<button>Btn1</button>
</li>
<li>
<button>Btn2</button>
</li>
<li>
<button>Btn3</button>
</li>
<li>
<button>Btn4</button>
</li>
</ul>
</div>
</div>
</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>
<div class="mobile-nav" style="border:0px solid red">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>

<div class="dropdown">
<ul class="list">
<li>
<button>Btn1</button>
</li>
<li>
<button>Btn2</button>
</li>
<li>
<button>Btn3</button>
</li>
<li>
<button>Btn4</button>
</li>
</ul>
</div>
</div>
</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
<tr>
<td>
<div class="mobile-nav" style="border:0px solid red">
<div class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</div>

<div class="dropdown">
<ul class="list">
<li>
<button>Btn1</button>
</li>
<li>
<button>Btn2</button>
</li>
<li>
<button>Btn3</button>
</li>
<li>
<button>Btn4</button>
</li>
</ul>
</div>
</div>
</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
<td>Lorem Ipsum</td>
</tr>
</table>




Answer

You can use siblings method to target the immediate .drop-down

$(document).ready(function(){
            $(".menu-btn").click(function(){
                $(this).siblings(".dropdown").toggleClass('expand');
            });
      });