Pass ID into Bootstrap delete Modal - html

Question

I was following a tutorial online to try and create a delete modal from Bootstrap, but it is not picking up on the userid from my users table. The users table is stored on a sql database.
I keep getting the error: jinja2.exceptions.UndefinedError: 'list object' has no attribute 'id'
I have tried looking at similar questions on the stackoverflow site but I am unable to get this working, as I am still learning code and struggling with relating the answers to my setup.
Thanks in advance for anyone that can help.
So below is my delete function.
#app.route("/user/<int:user_id>/delete", methods=['POST'])
#login_required
def delete_user(user_id):
user = User.query.get_or_404(user_id)
db.session.delete(user)
db.session.commit()
flash('The account has been deleted', 'success')
return redirect(url_for('view_user'))
Then this is my html page.
{% extends "layout.html" %}
{% block content %}
<div class="container">
<div class="table-wrapper">
{% with messages = get_flashed_messages(with_categories=true)%}
{% if messages%}
{% for category, message in messages %}
<div class="alert alert-{{category}}">
{{ message}}
</div>
{% endfor %}
{% endif %}
{% endwith %}
<div class="table-title">
<div class="row">
<div class="col-sm-8">
<h2>User Account <b>Details</b></h2>
</div>
<div class="col-sm-4">
<div class="search-box">
<i class="fas fa-search"></i>
<input type="text" class="form-control" placeholder="Search…">
</div>
</div>
</div>
</div>
<table class="table table-striped table-hover table-bordered">
<thead>
<tr>
<th>#</th>
<th>Username<i class="fa fa-sort"></i></th>
<th>Email Address<i class="fa fa-sort"></i></th>
<th>Role<i class="fa fa-sort"></i></th>
<th>Actions</th>
</tr>
</thead>
{% for user in user %}
<tbody>
<tr>
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.role}}</td>
<td>
<a href="{{url_for('update_user', user_id=user.id)}}" class="edit" title="Edit"
data-toggle="tooltip"><i class="fas fa-edit"></i></a>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
</tr>
</tbody>
{% endfor %}
</table>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete User?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
</div>
</div>
</div>
</div>
<div class="clearfix">
<div class="hint-text">Showing <b>5</b> out of <b>25</b> entries</div>
<ul class="pagination">
<li class="page-item disabled"><i class="fa fa-angle-double-left"></i></li>
<li class="page-item">1</li>
<li class="page-item">2</li>
<li class="page-item active">3</li>
<li class="page-item">4</li>
<li class="page-item">5</li>
<li class="page-item"><i class="fa fa-angle-double-right"></i></li>
</ul>
</div>
</div>
{% endblock content %}
Just in case it is needed this is my user table
class User(db.Model, UserMixin):
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(80), nullable=False, unique=True)
email = db.Column(db.String(80), nullable=False, unique=True)
password = db.Column(db.String(120), nullable=False)
role = db.Column(db.String(80))

Answer 1

<form action="{{ url_for('delete_user', user_id=user.id) }}" method="POST">
<input class="btn btn-danger" type="submit" value="Delete">
</form>
user is python list so you can't able to use here that is why you are getting this error, so inorder to delete specific user you should use one user's route then you can deal with that user.
or
<td>
<i class="fas fa-edit"></i>
<button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
change to
<td class="btn btn-danger" onclick="return confirm('Are you to delete this user?')">Drop</td>
and remove the whole model.
This one will help you to have default model instread of Bootstrap model
Hope that will help you