issue with Bootstrap modal using ajax and foreach

Question

I'm trying to use the BS modal to render a form with select box and ultimately update a record in DB via ajax call. The trigger btn to open the modal is a group of <i></i> tags with same class name itagbtn and data-classschid="some_numbere" to pass a variable to the php script. So the data that I'm supposed to pass via ajax to the php script are the value of select field within the modal form and the value of data-classschdid of the clicked i tag . Problem is, after ajax call, all records are updated at the same time, instead of only the clicked one. Your help is appreciated. Here are the simplified codes:

HTML & Modal

<tr>
  <td>
    <span class="spanClassStatus">
      Missed
    </span>
    <span class="wrapperSpan">
      <i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
    </span>
  </td>
</tr>
<tr>
  <td>
    <span class="spanClassStatus">
      Taken
    </span>
    <span class="wrapperSpan">
      <i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus"></i>
    </span>
  </td>
</tr>

<!-- Modal -->
<div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
          <h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4>
          <button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      </div>
      <div class="modal-body">
        <form action="#" method="POST" id="modalForm">
          <div class="">
            <small>Select a new status for this class</small>
            <select name="selected_status_id" id="selected_status_id" required="required">
              <option value="" selected="selected">Choose an item</option>
              <option value="taken">Taken</option>
              <option value="missed">Missed</option>
            </select>
          </div>
          <i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i>
          <span class="sr-only">Please wait ...</span>
          <button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size:0.9rem;">Update Status</button>
        </form>

      </div> <!-- end of modal-body -->
    </div>
  </div>
</div>

JAVASCRIPT

<script>
  $( document ).ready(
    function(){
      $('#ModalUpdateClassStatus').on('submit', function(e){
      e.preventDefault();
      const itagTriggers=document.querySelectorAll('i[data-classschid]');
      itagTriggers.forEach(itag => {
    
        var class_sch_id = itag.getAttribute('data-classschid');
        var selected_status_id = $('#selected_status_id').val();
        var statusSpinner = $('#statusSpinner');
        var spanClassStatus = $(itag).parent().siblings('.spanClassStatus');

        statusSpinner.removeClass('d-none');
        $('#editClassStatusBtn').prop('disabled', true);
        var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}";
        var type = "POST";
        $.ajax({
          url : url,
          type: type,
          data : {
            'selected_status_id': selected_status_id,
            'class_sch_id': class_sch_id
          },
          success: function(returnedMsg) {
            if (returnedMsg['status'] == "success") {
              $(spanClassStatus).text(returnedMsg['msg']);
            }
            else if(returnedMsg['status'] == "error"){
              //error stuff
            }
            else{
              //unknown error
            }
          }
        });     
      })
    });     
  });
</script>

Answer 1

Whenever your i tag is clicked you can save data-attr value inside hidden input and then use this hidden input value to pass to your ajax call as well for referring current tr where i tag has been clicked.

Demo Code :

 //on click of itag $(".itagbtn").on("click", function() { $("[name=classschid]").val($(this).data("classschid")) //add value to hidden input inside modal }) $('#ModalUpdateClassStatus').on('submit', function(e) { e.preventDefault(); var class_sch_id = $("[name=classschid]").val(); //get itag value var selected_status_id = $('#selected_status_id').val(); var statusSpinner = $('#statusSpinner'); var spanClassStatus = $("i[data-classschid=" + class_sch_id + "]").parent().siblings('.spanClassStatus'); ///use it here as well console.log(class_sch_id) statusSpinner.removeClass('d-none'); /*$('#editClassStatusBtn').prop('disabled', true); var url = "{{ path('class_schedule_tch_status_update')|escape('js') }}"; var type = "POST"; $.ajax({ url: url, type: type, data: { 'selected_status_id': selected_status_id, 'class_sch_id': class_sch_id }, success: function(returnedMsg) { if (returnedMsg['status'] == "success") {*/ $(spanClassStatus).text("ok ok"); //returnedMsg['msg'] /*} else if (returnedMsg['status'] == "error") { //error stuff } else { //unknown error } } });*/ });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <table> <tr> <td> <span class="spanClassStatus"> Missed </span> <span class="wrapperSpan"> <i class="btn itagbtn" data-classschid="1" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i> </span> </td> </tr> <tr> <td> <span class="spanClassStatus"> Taken </span> <span class="wrapperSpan"> <i class="btn itagbtn" data-classschid="2" data-toggle="modal" data-target="#ModalUpdateClassStatus">Click</i> </span> </td> </tr> <table> <.-- Modal --> <div class="modal fade" id="ModalUpdateClassStatus" tabindex="-1" role="dialog" aria-labelledby="modalLabelClassStatus"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="modalLabelClassStatus">Update Class Status</h4> <button type="button" class="close d-block text-danger" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <form action="#" method="POST" id="modalForm"> <div class=""> <small>Select a new status for this class</small> <select name="selected_status_id" id="selected_status_id" required="required"> <option value="" selected="selected">Choose an item</option> <option value="taken">Taken</option> <option value="missed">Missed</option> </select> <.--added this hidden input--> <input type="hidden" name="classschid"> </div> <i class="fa fa-spinner fa-pulse fa-3x fa-fw text-primary d-none" id="statusSpinner"></i> <span class="sr-only">Please wait.:.</span> <button type="submit" id="editClassStatusBtn" class="btn btn-success mt-2" style="font-size;0.9rem;">Update Status</button> </form> </div> <!-- end of modal-body --> </div> </div> </div>