We Keep Coding

Python Jinja2 loop index to make id unique

I'm using jinja2 template with Flask and MongoDB and I need to display users' cars in a template.
I was able to render cars in the profile template with car information and buttons to edit or delete a car. The problem is that if a user has multiple cars, only the first DELETE CAR button actually works (where I have an include modals to confirm) but nothing happens when click on the second or third delete button. Apparently I duplicated the id that needs to be unique. But I cannot achieve the results.
Here is my template: profile.html
{% extends 'layout/base.html' %}
{% block content %}
{% include 'components/navigation/navigation.html' %}
<div class="container">
<div class="row g-3 justify-content-center">
<div class="col-6 mt-5">
<div class="card">
<div class="card-body">
<h3 class="text-center profileHeader">
{{ username }}'s profile
</h3>
</div>
</div>
</div>
</div>
<div class="row row justify-content-center mt-4">
{% for car in cars %}
{% if session.user|lower == car.created_by|lower %}
<div class="card mb-3" style="max-width: 840px;">
<div class="row g-0">
<div class="col-md-4">
<img src="{{ car.car_image }}" class="imgCard" alt="ferrari image">
</div>
<div class="col-md-8">
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Year</strong>: {{ car.car_year }} </li>
<li class="list-group-item"><strong>Name</strong>: {{ car.car_name }}</li>
<li class="list-group-item"><strong>Designer</strong>: {{ car.car_design }}</li>
</ul>
<ul class="list-group list-group-flush">
<li class="list-group-item"><strong>Engine</strong>: {{ car.spec_engine }}</li>
<li class="list-group-item"><strong>Power</strong>: {{ car.car_power }}</li>
<li class="list-group-item"><strong>Trasmission</strong>: {{ car.trasmission }}</li>
<li class="list-group-item"><strong>Races</strong>: {{ car.races }}</li>
<li class="list-group-item"><strong>Wins</strong>: {{ car.wins }}</li>
<li class="list-group-item"><strong>Podiums</strong>: {{ car.podiums }}</li>
<li class="list-group-item"><strong>Poles</strong>: {{ car.poles }}</li>
<li class="list-group-item"><strong>Fast Laps</strong>: {{ car.fast_laps }}</li>
<li class="list-group-item"><strong>Constructor Championship</strong>: {{
car.constructor_champ
}}</li>
<li class="list-group-item"><strong>Driver Championship</strong>: {{ car.drivers_champ }}
</li>
<li class="list-group-item"><strong>Description</strong>: {{ car.description }}</li>
<p><em>by: {{ car.created_by }}</em></p>
</ul>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<a id="myBtn" class="btn btn-danger"><i class=" fas fa-trash-alt"></i> Delete</a>
<a href="{{ url_for('editcar', car_id=car._id) }}" class="btn btn-danger" id="edit-btn"><i
class="far fa-edit"></i> Edit</a>
{% with car_id=car._id %}
{% include 'components/modals/confirm.html' %}
{% endwith %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
enter code here
</div>
{% endblock %}

Just make unique the tag id of delete button, so the trigger will be unique in every button. How to make unique ? just add the car._id on tag id
<a id="myBtn-{{car._id}}" class="btn btn-danger"><i class=" fas fa-trash-alt"></i> Delete</a>

As #Darn pointed out, your ids need to be unique. But that is not the cause of your issue here.
I assume you have some Javascript code that gets triggered when user clicks on the delete link. The issue is probably from how that code is being triggered. The code needs to be written in such a way that it is bound to dynamically generated elements (you're generating the delete links on the fly i.e. afte the code for the delete was already bound; that delete code needs to also apply to each element when it is created).
You should bind the delete action to a class e.g.
$(".fa-trash-alt").on("click", function(){
$(this).parent() ...... // this is the link to the instance of the link that was clicked
});

Djago template card alignement [Django 2.2]

I Need your help please.
My envirenement is:
python 3.6.6
django 2.2
I want to generate some code like this using django template.
<div class="card-deck">
<div class="card">
actu1
</div>
<div class="card">
actu2
</div>
<div class="card">
actu3
</div>
<div class="card">
actu4
</div>
</div>
<!--insert inside a new div (with class card-deck) the 5th actu and next one-->
<div class="card-deck">
<div class="card">
actu5
</div>
<div class="card">
actu6
</div>
<div class="card">
actu7
</div>
<div class="card">
actu8
</div>
</div>
<!--insert inside a new div (with class card-deck) the 9th actu and next one-->
what I manage to do with django templates is as follows:
{% extends 'actu/base_actu.html'%}
{% load static %}
{%block actumain%}
<div class="card-deck">
{%for actu in actu%}
<div class="card">
{ {actu.content }}
</div>
{%endfor%}
</div>
{%endblock%}
which just gives the code as follows:
<div class="card-deck">
<div class="card">
actu1
</div>
<div class="card">
actu2
</div>
<div class="card">
actu3
</div>
<div class="card">
actu4
</div>
<div class="card">
actu5
</div>
<div class="card">
actu7
</div>
<div class="card">
actu8
</div>
<div class="card">
actu9
</div>
<div class="card">
actu10
</div>
<div class="card">
actu11
</div>
<div class="card">
actu...
</div>
</div>
Please, could you give me your idea to be able to generate such a code.
Thank you very much.

Use the forloop.counter0 and the divisibleby tempate tag like this:
{% for actu in actu %}
{% if forloop.counter0|divisibleby:"4" and not forloop.first %}
</div>
{% endif %}
{% if forloop.counter0|divisibleby:"4" %}
<div class="card-deck">
{% endif %}
<div class="card">
{{ actu.content }}
</div>
{% if forloop.last %}
</div>
{% endif %}
{% endfor %}
Here we first check if the loop counter is divisible by 4 and not the first iteration if yes we render the closing div tag.
Next we if the loop counter is divisible by 4 and if so we render the opening div tag.
After this we render the individual cards.
Next we check if this is the last iteration if so we render the closing div tag.

{% for item in actu %}
{% if forloop.counter0|divisableby:4 %}
<div class="card-deck">
{% endif %}
<div class="card">
{{ item.content }}
</div>
{% if forloop.counter0|divisableby:4 or forloop.last %}
</div>
{% endif %}
{% endfor %}

Problem iterating through MongoDB data using Flask & Jinja2

brand new to Flask/Python and i'm trying to iterate through a list of data from MongoDB using Flask. The data is grabbed with no issues but the result i get is all of the database entries stuffed into one div. Below i've provided some screenshots to further explain the problem.
The 2 MongoDB Entries:
The idea is to have 2 separate cards displaying the 2 entries. The card will display the name_moving, once clicked, the rest of the info will appear in a modal.
HTML Template Code:
<div id="modal1" class="modal request_info_wrap">
{% for user_details in user_details: %}
<div class="modal-content request_info_card">
<h4 class="request_name_header">{{ user_details.user_name }} {{ user_details.user_lname }}</h4>
<p class="request_info"><span class="request_title">Request
Address:</span><br>{{ user_details.user_street }}<br>{{ user_details.user_postcode }}</p><br>
<p class="request_info"><span class="request_title">Contact
Number:</span><br>{{ user_details.user_contact }}</p><br>
<p class="request_info"><span class="request_title">Requested
Date:</span><br>{{ user_details.user_date }}</p><br>
<div class="deep_clean_section">
<p class="request_info" style="color: #000;"><span class="request_title">Deep Clean
for:</span><br>{{ user_details.carpet_clean }}<br>{{ user_details.floor_steam }}<br>
{{ user_details.white_goods }}<br>{{ user_details.window_clean }}
</p>
</div><br>
<hr style="margin: 0;">
<p class="request_info"><span class="request_title">Customer
Message:</span><br>{{ user_details.user_message }}</p>
</div>
<div class="modal-footer job_card_btn_wrap">
<a href="#" class="modal-close replyto_btn">Reply to
{{ user_details.user_name }}</a>
</div>
{% endfor %}
</div>
</div>
The issue i'm having is that both entries show within the same div (shown below) whereas im trying to get each MondoDB entry to show individually when clicked.
Python/Flask Code:
#app.route("/deep_clean_info", methods=["GET", "POST"])
def deep_clean_info():
if request.method == "POST":
user_details = {
"user_name": request.form.get("user_name"),
"user_lname": request.form.get("user_lname"),
"user_contact": request.form.get("user_contact"),
"user_street": request.form.get("user_street"),
"user_postcode": request.form.get("user_postcode"),
"user_message": request.form.get("user_message"),
"user_date": request.form.get("user_date"),
"carpet_clean": request.form.get("carpet_clean"),
"floor_steam": request.form.get("floor_steam"),
"white_goods": request.form.get("white_goods"),
"window_clean": request.form.get("window_clean"),
}
mongo.db.user_details.insert_one(user_details)
flash("Request sent to cleaner")
return redirect(url_for("deep_clean_info"))
details = mongo.db.user_details.find().sort("user_details", 1)
return render_template("deep_clean_details.html", user_details=details)
I do think the issue is with my jinja2 for loop in my template but any help would be greatly appreciated, also if any additional information is needed i'll be more than happy to provide. Thanks!
EDIT
HTML Template that seemed to iterate fine, although i dont want to use this style to display the data.
<ul class="collapsible popout pending_jobs">
{% for user_details in user_details %}
<li>
<div class="collapsible-header request_item_header">
<i class="fas fa-comment-dots"></i>
{{ user_details.user_name }} {{ user_details.user_lname }}
</div>
<div class="collapsible-body request_info">
<div class="row">
<span class="row info_headers">Address:<br>
<span class="light_text info_text" id="customer_address">
{{ user_details.user_street }}</span>
</span><br>
<span class="info_headers">Contact Number:<br>
<span class="light_text info_text" id="customer_contact">{{ user_details.user_contact }}</span>
</span><br>
</div>
<span class="info_headers row customer_request_style">Customer Request:<br>
<span class="light_text italic_text" id="customer_request">{{ user_details.user_message }}</span>
</span><br>
<span class="info_headers">Cleaning Date:<br>
<span class="light_text italic_text" id="customer_request">{{ user_details.user_date }}</span>
</span><br>
<a href="{{ url_for('cleaner_chat') }}"><button class="respond_to_user">Respond to
{{ user_details.user_name }}?</button></a>
</div>
</li>
{% endfor %}
</ul>

Content from two columns doesn't show as expected Django and Bootstrap 4

I'm currently building a blog+portfolio with Django and Bootstrap 4.
The problem is when I try to show two columns, Articles next to my Profile. Both columns are in an HTML table, but for some reason, they do not show correctly.
For example:
How it looks like using HTML,CSS, and Bootstrap
Here is how it looks when I insert everything on my Base_layout.html
How it looks like when it is inserted in my django Base_layout.html
Here is my Base_layout, which has the code inside the table to show the articles of the blog ({% load bootstrap4 %} {% load static from staticfiles %} are included in the top of the document):
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<div class="card mb-4" class="article-detail">
{% block content %}
{% endblock %}
</div>
</div>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
<li class="page-item">
<a class="page-link" href="#">← Older</a>
</li>
<li class="page-item disabled">
<a class="page-link" href="#">Newer →</a>
</li>
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="{% static 'profile.jpg' %}" class="rounded-circle card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Leandro Fraisinet</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
More
</div>
</div>
</div>
</div>
</div>
Here is the code that is to be shown by Blog Entries Column
Article_list html:
{% extends 'base_layout.html' %}
{% load bootstrap4 %}
{% block content %}
<h1> </h1>
{% for article in articles %}
<div class="card-body" class="article">
<img class="card-img-top" src="{{ article.thumb.url}}" alt="Main post image">
<h2 class="card-title">{{article.title}}</h2>
<p class="card-text">{{article.snippet}}</p>
</div>
<div class="card-footer text-muted">
<p>{{article.date}}</p>
</div>
<h1> </h1>
{% endfor%}
{% endblock %}
I think that my main conflict is in Blog Entries Column but I do not know how to solve this.
Please any extra code that could be useful to solve this let me know.
Django version, 1.11 Phyton version 2.7, Bootstrap version 4.

You sidebar column is outside the row
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
</div>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4">
</ul>
</div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4">
</div>
try to put it inside:
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8"></div>
<!-- Sidebar Widgets Column -->
<div class="col-md-4"></div>
</div>
<!-- Pagination -->
<ul class="pagination justify-content-center mb-4"></ul>
</div>

Django templatetags rendered as None in the template

Somebody can help me how to solve this problem, why my templatetags isn't rendered in the template? but, only rendered as None instead.
Previously I working with Django==1.10.4.
1. templatetags/total_tags.py, I already created __init__.py inside this folder.
from django import template
from myapp.models import Category
register = template.Library()
#register.simple_tag
def total_categories():
"""
{% load total_tags %}
{% total_categories %}
used in: `includes/menus_dashboard.html`
"""
print(Category.objects.all()) # this worked well
Category.objects.all().count()
2. myapp/dashboard.html
{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Dashboard" %} :: {{ block.super }}{% endblock %}
{% block content %}
<div class="ui two column stackable grid">
<div class="four wide column dashboard-menu">
{% include "includes/menus_dashboard.html" %}
</div>
</div>
{% endblock %}
3. includes/menus_dashboard.html
The templatetags of {% total_topics %} is similiar with {% total_categories %}
{% load total_tags %}
<div class="ui fluid large inverted vertical pointing menu">
<a class="active item">
Dashboard
</a>
<a class="item">
Categories <div class="ui small label">{% total_categories %}</div>
</a>
<a class="item">
Topics <div class="ui small label">{% total_topics %}</div>
</a>
<a class="item">
Moderators <div class="ui small label">2</div>
</a>
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search threads...">
<i class="search icon"></i>
</div>
</div>
</div>
Another idea, I tried like this answer: https://stackoverflow.com/a/12143011. and handle it with #register.assignment_tag, but still doesn't work well and only None instead.