Call a modal with data ajax laravel 8 - php

Question

I have a problem with my app , when i click the edit btn in the table then my modal is showed with data and when i click the second row in the table then my modal is not show.
this my controller :
public function edit_kpi_program_plan(Request $request)
{
$data = kpi_input_program::where('id' , $request->id)->first();
return response()->json($data, 200);
}
this my route :
Route::post('/edit-program-input', [InputController::class, 'edit_kpi_program_plan'])->name('edit.program');
this my button in blade:
Edit
this my modal in blade:
<!-- Modal Input Program Plan Value Update -->
<div class="modal fade" id="new_modal_plan" tabIndex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Input Program Plan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('update-kpi-program-plan') }}" method="post">
#csrf
<div class="form-group">
<label for="exampleFormControlSelect1">Pilih Item</label>
<select name="id_program_plan_update" class="form-control" id="exampleFormControlSelect1">
#forelse ($data_drop_update as $item)
<option value="{{ $item->id }}">{{ $item->program }}</option>
#empty
<td colspan="18"><h3 class="text-center">No Data Inputed</h3></td>
#endforelse
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Konfirmasi Pilihan</label>
<select name="kpi_program_plan_id" class="form-control" id="exampleFormControlSelect1">
#forelse ($data_drop as $item)
<option value="{{ $item->id }}">{{ $item->program }}</option>
#empty
<td colspan="18"><h3 class="text-center">No Data Inputed</h3></td>
#endforelse
</select>
</div>
<div class="form-group">
<table class="table table-bordered">
<thead>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</thead>
<tbody>
#foreach ($dataf as $item)
<td><input type="text" name="jan_plan" id="jan_plan" style="max-width: 40px"></td>
<td><input type="text" name="feb_plan" id="feb_plan" style="max-width: 40px"></td>
<td><input type="text" name="mar_plan" id="mar_plan" style="max-width: 40px"></td>
<td><input type="text" name="apr_plan" id="apr_plan" style="max-width: 40px"></td>
<td><input type="text" name="may_plan" id="may_plan" style="max-width: 40px"></td>
<td><input type="text" name="jun_plan" id="jun_plan" style="max-width: 40px"></td>
<td><input type="text" name="jul_plan" id="jul_plan" style="max-width: 40px"></td>
<td><input type="text" name="aug_plan" id="aug_plan" style="max-width: 40px"></td>
<td><input type="text" name="sep_plan" id="sep_plan" style="max-width: 40px"></td>
<td><input type="text" name="oct_plan" id="oct_plan" style="max-width: 40px"></td>
<td><input type="text" name="nov_plan" id="nov_plan" style="max-width: 40px"></td>
<td><input type="text" name="dec_plan" id="dec_plan" style="max-width: 40px"></td>
#endforeach
</tbody>
</table>
</div>
<button class="btn btn-primary" type="submit" id="btn-save">Save</button>
</form>
</div>
</div>
</div>
</div>
and this my ajax :
<script>
$(document).ready(function($) {
$('#btn-edit-plan').on('click', function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var id = $(this).data('id');
console.log(id);
// ajax
$.ajax({
type: "POST",
url: "{{ url('edit-program-input') }}",
data: { id: id },
dataType: 'json',
success: function(res) {
$('#new_modal_plan').modal('show');
$('#jan_plan').val(res.jan);
$('#feb_plan').val(res.feb);
$('#mar_plan').val(res.mar);
$('#apr_plan').val(res.apr);
$('#may_plan').val(res.may);
$('#jun_plan').val(res.jun);
$('#jul_plan').val(res.jul);
$('#aug_plan').val(res.aug);
$('#sep_plan').val(res.sep);
$('#oct_plan').val(res.oct);
$('#nov_plan').val(res.nov);
$('#dec_plan').val(res.dec);
}
});
});
})
</script>

Answer 1

The id attribute should be unique for every element in the page. but it is not like this with class attribute.
so update your button:
Edit
and update your jQuery selector to:
$(document).on('click', '.btn-edit-plan', function() {
// Your code here
})
You can learn more about it here: Difference between class and id in jQuery