PHP Ajax Only loads in first row

Question

I'm trying to run script on php with Ajax but only first row get updated.

I seen some stack overflow posts about classes which I done but still doesn't work for me.

I have php table running in foreach which loads data from sqlite

The form which I'm having issues with in the table

       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>";

                }

And JavaScript which I'm using

$(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)
        }
    });
}
});

I changed from ID to Class but I'm still missing something during table loop only first row is working second seems like data is ignored as empty string is reported.

If someone knows what I'm doing wrong or have solution on this would be great as after hours of researching and trying different codes no luck. not fan of ajax but needed in this case.

Answer 1

I managed to fix it.

I created < ty > element around the form.

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

Eample

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

And made search to closest ty element. Now I understand this logic.