PHP Ajax se charge uniquement dans la première ligne

J'essaie d'exécuter un script sur php avec Ajax mais seule la première ligne est mise à jour.

J'ai vu des messages de débordement de pile sur les cours que j'ai suivis mais qui ne fonctionnent toujours pas pour moi.

J'ai une table php en cours d'exécution dans foreach qui charge les données de sqlite

Le formulaire avec lequel j'ai des problèmes dans le tableau

 foreach ($result as $row) {
 extract($row);
 
 
 echo '<!-- Modal -->
<div class="modal fade" id="company_id-'.$row['company_id'].'" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="company_id-'.$row['company_id'].'" aria-hidden="true">
 <div class="modal-dialog modal-xl">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="exampleModalLabel">Company ID: '.$row['company_id'].'</h5>
 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div class="modal-body">
 <div class="mb-3">
 <ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#notes">Notes</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#other">Other</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active show" id="notes">
<div class="d-grid gap-2">
<button type="button" class="btn btn-secondary" disabled>Notes</button>
</div>
<form method="POST">
 <div class="form-group">
  <label>company_id</label>
  <input type="text" class="company_id" id="company_id[]"/>
 </div>
 <div class="form-group">
  <label>notes</label>
  <input type="text" class="notes" id="notes[]"/>
 </div>
 <center><button type="button" class="save" id="save[]" >Insert</button></center>
 </form>
 </div>
</div>
<div class="tab-pane fade" id="other">
<br>
<div class="d-grid gap-2">
...
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>';
 
 //creating new table row per record
 echo "<tr>";
 echo '<td><span class="badge '. $exmpl_status_icon.'">'. $exmp_status. '</span></td>';
 echo '<td><button type="button" data-bs-toggle="modal" data-bs-target="#company_id-'.$row['company_id'].'" class="btn btn-warning"><i class="fa-solid fa-eye"></i> </button></td>';
 echo "</tr></tbody>";
 }

Et JavaScript que j'utilise

$(document).ready(function(){
displayData();
$('.save').on('click', function(){
 var notes = $('.notes').val();
 var company_id = $('.company_id').val();
 if($('.notes').val() == "" || $('.company_id').val() == ""){
 alert("Please complete the required field");
 }else{
 $.ajax({
 type: 'POST',
 url: 'addcomment.php',
 data: {
 notes: notes,
 company_id: company_id,
 },
 success: function(data){
 $('.notes').val('');
 $('.company_id').val('');
 alert(data);
 displayData();
 }
 })
 }
});
function displayData(){
 $.ajax({
 type: 'POST',
 url: 'data.php',
 data: {res: 1},
 success: function(data){
 $('.data').html(data)
 }
 });
}
});

Je suis passé de l'ID à la classe mais il me manque toujours quelque chose pendant la boucle de table, seule la première ligne fonctionne, la deuxième semble que les données sont ignorées car une chaîne vide est signalée.

Si quelqu'un sait ce que je fais mal ou a une solution à ce sujet, ce serait formidable, car après des heures de recherche et d'essai de différents codes, pas de chance. pas fan d'ajax mais nécessaire dans ce cas.

Solution du problème

J'ai réussi à le réparer.

J'ai créé l'élément <ty> autour du formulaire.

 var $el = $(this).closest('ty'); //Find parent tr element 
 var notes = $el.find(".notes").val();
 var company_id = $el.find(".company_id").val();

Exemple

 <ty>
 <form>
 </form>
</ty>

Et fait une recherche jusqu'à l'élément ty le plus proche. Maintenant je comprends cette logique.