Modal inside my html table not working or can’t be open, only the first is modal is working

Only first modal can be open inside my html table is there a way to fix it? I’m using javascript to open modal instead of using target using a button. I want to open modal for every selected row in my table. Thank you in advanced.

Modal

This is my html table code

     <div class="row">
      <div class="col-12">
      <table class="table table-bordered" id="">
      <thead>
      <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Email</th>
      <td colspan="2">Action</td>
      </tr>
      </thead>
      <tbody id="users-crud">
      @foreach($merchants as $merchant)
      <tr id="user_id_{{ $merchant->id }}">
      <td>{{ $merchant->id  }}</td>
      <td>{{ $merchant->first_name }}</td>
      <td>{{ $merchant->email }}</td>
      <td><a href="javascript:void(0)" id="getData" data-id="{{ $merchant->id }}" class="btn 
      btn-info">Show</a></td>
      </tr>
      @endforeach
      </tbody>
      </table>
      {{ $merchants->links() }}
      </div> 
    </div>

Then this is my modal code

 <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">

        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">

          {{-- i want to output here the return value from query --}}
                    <p id="id"></p>
                    <p id="first_name"></p>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        </div>

      </div>
    </div>
    </div>

and this is my script

<script type=text/javascript>
$(document).ready(function() {
$("#getData").click(function() { 

$('#myModal').modal('show');
$.ajax({  //create an ajax request to display.php
type: "GET",
url: "getproducts/",  
// dataType: 'json',
// data: {id: 3} // This will be {id: "1234"}     
success: function (data) {
$("#id").html(data.id);
$("#first_name").html(data.first_name);
}
});

});
});

</script>

Answer

Inside table

<td><a id="getData" onClick="getData({{$merchant->id}})" 
  class="btn btn-info">Show</a></td>

make sure inside getData() we have correct data in proper format int or string.

Keep the modal as its or you may change if required.

In the script

  <script type=text/javascript>
  $(document).ready(function() {
   });

   function getData(id){
  $('#myModal').modal('show');
      $.ajax({  //create an ajax request to display.php
      type: "GET",
   url: "{{route('nameOfYourRoute)}}",  
   // dataType: 'json',
    data: {id: id}, // This will be {id: "1234"}     
    success: function (data) {
   $("#id").html(data.id);
   $("#first_name").text(data.first_name);
   }
   });

  };

</script>

to debug check error message and post that too so it will be easy to solve your problem.