Data push via Ajax/Post

I built an PHP/Ajax script to send mass newsletter emails through PHPMailer which works perfectly fine except getting the value from HTML INPUT BOX for the subject of the email.

The table gets the value from MySQL database with the following HTML/Bootstrap;

<div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <tr>
                        <th>Customer Name</th>
                        <th>Email</th>
                        <th>Select</th>
                        <th>Action</th>
                    </tr>
                <?php
                $count = 0;
                foreach($result as $row)
                {
                    $count = $count + 1;
                    echo '
                    <tr>
                        <td>'.$row["customer_name"].'</td>
                        <td>'.$row["customer_email"].'</td>
                        <td>
                            <input type="checkbox" name="single_select" class="single_select" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" />
                        </td>
                        <td>
                        <button type="button" name="email_button" class="btn btn-info btn-xs email_button" id="'.$count.'" data-email="'.$row["customer_email"].'" data-name="'.$row["customer_name"].'" data-action="single">Send Single</button>
                        </td>
                    </tr>
                    ';
                }
                ?>
                
                    <tr>
                        <td colspan="3"></td>
                        <td><button type="button" name="bulk_email" class="btn btn-info email_button" id="bulk_email" data-action="bulk">Send Bulk</button></td></td>
                    </tr>
                    <tr>
                </table>
            </div>

The following AJAX/POST submits the data to PHP to call PHPMailer function;

<script>
$(document).ready(function(){
    $('.email_button').click(function(){
        $(this).attr('disabled', 'disabled');
        var id  = $(this).attr("id");
        var action = $(this).data("action");
        var email_data = [];
        if(action == 'single')
        {
            email_data.push({
                email: $(this).data("email"),
                name: $(this).data("name")
            });
        }
        else
        {
            $('.single_select').each(function(){
                if($(this).prop("checked") == true)
                {
                    email_data.push({
                        email: $(this).data("email"),
                        name: $(this).data("name")
                    });
                } 
            });
        }

        $.ajax({
            url:"send_mail.php",
            method:"POST",
            data:{email_data:email_data},
            beforeSend:function(){
                $('#'+id).html('Sending...');
                $('#'+id).addClass('btn-danger');
            },
            success:function(data){
                if(data == 'ok')
                {
                    $('#'+id).text('Success');
                    $('#'+id).removeClass('btn-danger');
                    $('#'+id).removeClass('btn-info');
                    $('#'+id).addClass('btn-success');
                }
                else
                {
                    $('#'+id).text(data);
                }
                $('#'+id).attr('disabled', false);
            }
        })

    });
});
</script>

The following PHP Script grabs the data and sends email which works perfectly fine.

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer-master/src/Exception.php';
require 'PHPMailer-master/src/PHPMailer.php';
require 'PHPMailer-master/src/SMTP.php';

if(isset($_POST['email_data']))
{
    $output = '';
    foreach($_POST['email_data'] as $row)
    {
        $mail = new PHPMailer;
        $mail->IsSMTP();        
        $mail->XMailer  = "Gleez CMS 0.10.5";   
        $mail->SMTPKeepAlive = true;                    
        $mail->Host = "smtp.gmail.com";
        $mail->Port = 587;
        $mail->SMTPAuth = TRUE;
        $mail->Username = "user@gmail.com";
        $mail->Password = "password";
        $mail->SMTPSecure = "tls";
        $mail->From = "user@gmail.com";
        $mail->FromName = "Jack N";
        $mail->AddAddress($row["email"], $row["name"]);
        $mail->WordWrap = 50;
        $mail->IsHTML(true);
        $mail->Subject = "You have a new message";
        $mail->Body = "This line also supports html";

        $mail->AltBody = '';

        $result = $mail->Send();

        if($result["code"] == '400')
        {
            $output .= html_entity_decode($result['full_error']);
        }

    }
    if($output == '')
    {
        echo 'ok';
    }
    else
    {
        echo $output;
    }
}

?>

The challenge I face is to replace

$mail->Subject = "You have a new message";

with

$mail->Subject($row["subject"]);

The actions I tried was to include the following lines in my HTML page like,

<input type="text" name="subject" id="subject">

// modify the AJAX Script

subject:$(this).data("subject")
or var subject = document.getElementById("subject");

but none worked! :(

Any guidance, please? Thank you! Wish y'all a healthy days ahead. Cheers.

source https://stackoverflow.com/questions/67731296/data-push-via-ajax-post