[Python] SweetAlert delete confirmation of table row only deletes the last row

I have an HTML table with rows containing data from my SQL database, with the table body being under a for loop to display the fetchall rows. Before deleting the specific row, I want a SweetAlert to pop up for confirmation. However, it only deletes the last row instead of the row I want?

Here is my HTML table:

<div class="table-responsive my-5">
<table id="table-address-book" class="display table table-striped table-hover">
<thead>
<tr style="text-align: center;">
<th style="width: 15%;">Recipient Name</th>
<th style="width: 15%;">Contact number</th>
<th>Street name</th>
<th style="width: 10%;">Category</th>
<th style="width: 150px;">Actions</th>
</tr>
</thead>
<tbody>
{% for address in addressInfo %}
<tr class="row-address-book" style="text-align: center; text-wrap: stable; vertical-align: middle;">
<td>
{% if address.15 == 1 %}
Default
<br>
{{address.3}}
{% else %}
{{address.3}}
{% endif %}
</td>
<td>
<p class="mx-1" style="margin-bottom: 0px;">{{address.11}}</p>
</td>
<td>
<p class="mx-1" style="margin-bottom: 0px;">{{address.8}}</p>
</td>
<td>
<p class="mx-1" style="margin-bottom: 0px;">{{address.12}}</p>
</td>
<td>
<button
class="btn btn-sm mx-1 btn-black"
type="button"
style="margin-bottom: 0px;"
>
<i class="fa fa-chevron-down"></i>
</button>
<button
class="btn-edit-address btn btn-sm mx-1"
type="button"
style="color: rgb(24, 115, 184); margin-bottom: 0px;"
>
<i class="fa fa-edit"></i>
</button>
<form action="{{ url_for('homepage.deleteBuyerAddress', addressBookID=address[0]) }}" class="form-delete-address" method="POST">
<button
class="btn-delete-address btn btn-sm mx-1"
type="submit"
style="color: red; margin-bottom: 0px;"
>
<i class="fa fa-times"></i>
</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>


Here is my javascript:

$(".btn-delete-address").click(function() {
event.preventDefault();
swal({
icon: "warning",
title: "Delete address",
text: "Do you wish to delete this address? You cannot recover this address once deleted.",
type: "warning",
buttons: {
confirm: {
text: "Delete",
className: "btn btn-success"
},
cancel: {
visible: true,
className: "btn btn-danger",
},
},
}).then((deleteValue) => {
if (deleteValue) {
$(".form-delete-address").submit();
};
});
});


Here is my python code for SQL query:

@homepage.route('/deleteBuyerAddress/<addressBookID>', methods=['GET', 'POST'])
def deleteBuyerAddress(addressBookID):
if request.method=='POST':
conn = get_db_connection()
if conn is None:
flash("NO DB CONNECTION", category='error')
return redirect(url_for('homepage.home'))

cursor = conn.cursor()

try:
cursor.execute("DELETE FROM address_book WHERE accountID=%s and addressBookID=%s", (session['accountID'], addressBookID))
conn.commit()
flash("Successfully deleted address!", category='success')
return redirect(url_for('homepage.addressBook'))
except Error as e:
conn.rollback()
flash(f"{e}", category='errpr')
return redirect(url_for('homepage.addressBook'))
finally:
cursor.close()
conn.close()



I've already gone from using IDs to classes, but it still doesn't work. However, when I omit SweetAlert, like I just go straight to submitting the form and not even bother showing the pop-up, it works properly. What goes wrong?

Continue reading...