      <div class="modal fade" id="add-SAPForm<?= htmlentities($user_session); ?>">
          <div class="modal-dialog modal-sm">
              <div class="modal-content">
                  <div class="modal-header">
                      <h4 class="modal-title">Manage SAP Form</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
                  </div>
                  <div class="modal-body">
                      <form method="POST">
                        <div id="msg-sapform"></div>
                          <div class="form-group">
                              <label>SAP FORM #:</label>
                              <input type="text" id="sapform_no" alt="sapform_no" class="form-control" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" autocomplete="off">
                          </div>
                          <div class="form-group">
                              <label>Beneficiaries Name:</label>
                             <select id="beneficiaries_id" alt="beneficiaries_id" class="select2 form-control input-sm" style="width:100%">
                                    <option selected="" disabled="">&larr; Select Resident &rarr; </option>
                                    <?php
                                      include_once('../../config/conn/db-connection.php');
                                      $data = $db->query("SELECT * FROM  tbl_beneficiaries")->fetchAll();
                                        foreach ($data as $row) {
                                            echo '
                                                <option value="'.htmlentities($row['beneficiaries_id']).'">'.htmlentities($row['lastname']).', '.htmlentities($row['firstname']).' '.$row['middlename'].'</option>    
                                            ';
                                        }
                                    ?>
                                </select>
                          </div>
                          <div class="form-group">
                              <label>Purpose:</label>
                              <textarea type="text" rows="2" id="purpose" alt="purpose" class="form-control"  autocomplete="off"></textarea>
                          </div>
                          <div class="form-group">
                              <label>Financial Service Provider:</label>
                              <input type="text" id="financial_serviceprovider" alt="financial_serviceprovider" class="form-control" autocomplete="off">
                          </div>
                     </div>
                  <div class="modal-footer justify-content-between">
                      <input type="hidden" alt="user" id="user" value="<?= htmlentities($user_session); ?>">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-success" id="add-SAP">Add</button>
                  </div>
               </form>
              </div>
          </div>
      </div>
           <script>
          document.addEventListener('DOMContentLoaded', () => {
              let btn = document.querySelector('#add-SAP');
              btn.addEventListener('click', () => {

                  const sapform_no = document.querySelector('input[alt=sapform_no]').value;
                  const beneficiaries_id = $('#beneficiaries_id option:selected').val();
                  const purpose = document.querySelector('textarea[alt=purpose]').value;
                  const financial_serviceprovider = document.querySelector('input[alt=financial_serviceprovider]').value;
                  const user = document.querySelector('input[alt=user]').value;

                  var data = new FormData(this.form);

                  data.append('sapform_no', sapform_no);
                  data.append('beneficiaries_id', beneficiaries_id);
                  data.append('purpose', purpose);
                  data.append('financial_serviceprovider', financial_serviceprovider);
                  data.append('user', user);

                  if (sapform_no == '' || beneficiaries_id == '' || purpose == '' || financial_serviceprovider == '') {
                      $('#msg-addhousehold').html("<div class='alert alert-danger'><i class='fa fa-info'></i> Please input required field!</div>");
                  } else {
                      $.ajax({
                          url: '../../controllers/add_sapform.php',
                          type: "POST",
                          data: data,
                          processData: false,
                          contentType: false,

                          async: false,
                          cache: false,

                          success: function(data) {
                              $('#msg-sapform').html(data);

                          },
                          error: function(data) {
                              console.log("Failed");
                          }
                      });
                  }

              });
          });
      </script>