Getting id from MySQL to modal and passing it through Ajax - php

Question

I fetched the id from the database and passed it to the modal, and then echo it on another page through ajax but the problem is that it keeps returning the same id
<?php if(mysqli_num_rows($select_invoice_query)>0) {
while($invoice_result = mysqli_fetch_assoc($select_invoice_query)) { ?>
<tr>
<td><i class="fa fa-envelope"></i></td>
</tr>
<?php }} ?>
Bootstrap Modal
<div id="send-invoice-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Send Invoice</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="email" id="invoice_to" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" id="invoice_subject" class="form-control" placeholder="Subject">
</div>
<div class="form-group">
<textarea class="form-control" id="invoice_message" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="send_invoice_btn">Send</button>
<div class="error_message"></div>
</div>
</div>
</div>
</div>
JS
$('#send_invoice_btn').on('click',function(){
var invoice_id = $('#send_invoice').data('invoiceid'); // this is collecting the id from the anchor tag
var invoice_to = $('#invoice_to').val();
var invoice_subject = $('#invoice_subject').val();
var invoice_message = $('#invoice_message').val();
$.ajax({
url: "includes/send-invoice.inc.php"+invoice_id,
type: 'POST',
data: {invoice_id:invoice_id,invoice_to:invoice_to,invoice_subject:invoice_subject,invoice_message:invoice_message},
success: function(send_invoice_result){
$('.error_message').html(send_invoice_result);
}
})
});
send-invoice.inc.php File
<?php
include 'db-connection.php';
echo $invoice_id = $_GET['invoice_id'];
?>
it keeps returning the same id for some unknown reason. Can anyone tell me what am I doing wrong?

Answer 1

This works for me
$('.send_invoice').on('click',function(){
var invoice_id = $(this).attr('data-invoiceid');
$('#send_invoice_btn').on('click',function(){
var invoice_to = $('#invoice_to').val();
var invoice_subject = $('#invoice_subject').val();
var invoice_message = $('#invoice_message').val();
$.ajax({
url: 'includes/send-invoice.inc.php?invoice_id='+invoice_id,
type: 'POST',
data: {invoice_to:invoice_to,invoice_subject:invoice_subject,invoice_message:invoice_message},
success: function(send_invoice_result){
}
});
});
});