PHP Ajax Only loads in first row-CodePudding

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  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 >
    <div >
      <div >
        <h5  id="exampleModalLabel">Company ID: '.$row['company_id']  .'</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
    <div >
    <ul >
<li >
<a  data-bs-toggle="tab" href="#notes">Notes</a>
</li>
<li >
<a  data-bs-toggle="tab" href="#other">Other</a>
</li>
</ul>
<div id="myTabContent" >
<div  id="notes">

<div >
<button type="button"  disabled>Notes</button>
</div>
<form method="POST">
                <div >
                    <label>company_id</label>
                    <input type="text"  id="company_id[]"/>
                </div>
                <div >
                    <label>notes</label>
                    <input type="text"  id="notes[]"/>
                </div>
                <center><button type="button"  id="save[]" >Insert</button></center>
            </form>
        </div>

</div>
<div  id="other">
<br>
<div >
...
</div>

</div>
<div >
<button type="button"  data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>';
             
            //creating new table row per record
            echo "<tr>";
                echo '<td><span >' . $exmp_status . '</span></td>';
                echo '<td><button type="button" data-bs-toggle="modal" data-bs-target="#company_id-'.$row['company_id']  .'" ><i ></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.

CodePudding user response：

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.