How to change the div element after ajax call? - php

Question

Only the first row of the table is changing
HTML table
<tr>
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $entrepreneur->name }}</td>
<td>{{ $entrepreneur->contact }}</td>
<td>{{ $entrepreneur->address }}</td>
<td>{{ $entrepreneur->business_name }}</td>
<td>{{ $entrepreneur->business_address }}</td>
<td>
<div id="approval">
<button class="check-btn" id="check-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#checkModal-{{ $entrepreneur->id }}"><i class="fa fa-check"></i></button>
<button class="delete-btn" id="delete-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#rejectModal-{{ $entrepreneur->id }}"><i class="fa fa-close"></i></button>
</div>
</td>
</tr>
Ajax Function
$.ajax({
type: 'post',
url: "/changeAccepted/"+entrepreneur_id,
success: function(res) {
toastr["success"]('Entrepreneur accepted succesfully');
$('#checkModal-'+entrepreneur_id).modal('hide');
$('#approval').html('Accepted');
} });
I am trying to change the two buttons on 'id=approval', right now it is changing for only the first row. I also want to change for other rows when it is accepted.

Answer 1

Each html element on same page has to have unique id property.
As you are using table I think you have multiple rows and each row has its own buttons placed in <div id="approval"></div> element.
When you use $('#approval') selector, Jquery gets only first one.
If you want to select all and change every element you have to use any selector but id.
The simplest way is to use .class selector.
Example & Solution:
Html:
...
<div class="approval_class">
<button class="check-btn" id="check-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#checkModal-{{ $entrepreneur->id }}"><i class="fa fa-check"></i></button>
<button class="delete-btn" id="delete-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#rejectModal-{{ $entrepreneur->id }}"><i class="fa fa-close"></i></button>
</div>
...
Javascript (Jquery): (to change all rows as accepted)
$('.approval_class').html('Accepted');
Javascript (Jquery): (to change only that row which accepted)
$('#delete-btn-' + entrepreneur_id).closest('div').html('Accepted');