don't get data-id value from seceond to last

Question

I am trying to get data-id value from all td. But I only get the data-id value from the first td. Why am I not getting data-id value from second td to last td ?

This is my blade template code:

@foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            id="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                             </tr>
                  @endforeach
This is my jquery code: 

      $('#edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

   });

IDs _must_ be unique within an HTML document. – CBroe Aug 01 '22 at 11:08 — CBroe, Aug 01 '22 at 11:08

score 0 · Answer 1 · answered Aug 01 '22 at 11:10

That might be, because HTML defines IDs as a once-per-page name. So you can never have multiple elements on a single page with the same id="xxx" attribute.

As a result you should never use a fixed ID if you iterate over anything (like your @foreach)! Use a className instead:

                  @foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            class="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                    </tr>
                  @endforeach

with:

$('.edit_type').click(function(){
    var type_id = $(this).attr('data-id');
    console.log(type_id);
});

score 0 · Answer 2 · answered Aug 01 '22 at 11:34

This is the code you have:

      $('#edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

      });

The # is an id selector, so the code under the hood stops its search when the first match was found, because an id (which stands for unique identifier) is safe to be assumed to be unique. If that's not the case in your situation, then you have invalid HTML, which is your main problem.

Technically a selector of $([id=edit_type]) would work, because it would be an attribute selector, but you should do something like this instead:

@foreach ($types as $type)
                    <tr>
                       <td>{{$type->name}}</td>
                       <td><a href="javascript:void(0)"  
                            class="edit_type" data-id="{{ $type->id }}"> 
                            <i class="far fa-edit"></i></a> <a 
                            href=""><i class="fas fa-trash-alt"></i> 
                             </a> 
                         </td>
                             </tr>
                  @endforeach

      $('.edit_type').click(function(){
         var type_id = $(this).attr('data-id');
         console.log(type_id);

   });

don't get data-id value from seceond to last

2 Answers2