show and hide only showing the first drop down

Question

<!-- this is all in a table-->  
<tr> <!-- is bing repeated via loop in php -->
  <td>
    <ul class="icons-list">

     <li class="dropdown">
       <a href="#" class="here">Click me</a>

         <ul id=this" class="dropdown-menu dropdown-menu-right">
          <li><input type="submit" value="Edit"</li>
        </ul>
       </li>

    </ul>
  </td>
</tr>

$('#table tbody').on('click', 'tr','.here', function () {
  $('#this').toggle();
} );

I have this code what happen is when I click on them the drop down does show but only for the first row no matter which row I click on. please note that there is multiple rows how can I fix this?

Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, May 10 '18 at 22:47
You can't repeat ids, and even if this were using a class selector, you are trying to perform a global lookup. You have to perform contextual lookups when doing this sort of logic. — Taplar, May 10 '18 at 22:48
@Taplar how is it a duplicate ? please expain could you tell me how to m not so good with jquery — c319113, May 10 '18 at 22:49
The primary error is related to your use of duplicate ids, which is addressed in that question. Once you fix that, then you may (will) have another error, which you might be able to solve on your own. But if not, that could be an update to this question or a new question. — Taplar, May 10 '18 at 22:52
I will also add that the sample is incomplete and does not show the behavior he is explaining. On an update or new question please see https://stackoverflow.com/help/mcve — Steve0, May 10 '18 at 22:59

Mamun · Accepted Answer · 2018-05-10T23:25:19.107

In jQuery's on(), the second parameter is for the selector. But you are passing that to the second and third parameter. Use this keyword to refer to the current element.

Try the following way:

$('#table tbody').on('click', 'tr .here', function(){
  $(this).next('ul.dropdown-menu').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
  <tbody>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl1" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl2" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
    <tr> <!-- is bing repeated via loop in php -->
     <td>
      <ul class="icons-list">

         <li class="dropdown">
           <a href="#" class="here">Click me</a>

             <ul id="ddl3" class="dropdown-menu dropdown-menu-right">
              <li><input type="submit" value="Edit"/></li>
            </ul>
           </li>

        </ul>
     </td>
    </tr>
  </tbody>
</table>

thank you so much man i have been stuck here for quite a long time you are the only person who actually helped the rest just lol commented thank you so much — c319113, May 10 '18 at 23:31
@c319113, you are most welcome... others are also helping by their valuable comments...thanks. — Mamun, May 10 '18 at 23:33

show and hide only showing the first drop down

1 Answers1