We Keep Coding

Bootstrap Modal is not working with "for" in jinja 2

I am using bootstrap modal in my flask blog where is put the bootstrap modal inside the {% for blog in blogs %} section where I pass the {{blog.id}} in my modal.
But every modal is showing the same first {{blog.id}} (for ex. 1 in every modal) where every modal should have the id of it's respective blog.
Here is the code -
{% for blog in blogs %}
<div class="col-md-12">
<div class="mu-blog-area">
<!-- Title -->
<div class="row">
<div class="col-md-8">
<h1 class="mu-blog-item-title">{{blog.title}}</h1>
<p>{{blog.body}}</p>
<form action="/blog_detail/{{blog.id}}" method="post">
<button class="mu-blg-readmore-btn" type="submit">Read more <i class="fa fa-long-arrow-right"></i></button>
</form>
<div class="mu-blog-navigation">
<button class="mu-blog-nav-btn mu-blog-nav-prev ><span class="fa fa-trash-o"></span>Delete Post</button>
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
</div>
</div>
<!-- Blog Navigation -->
</article>
<!-- End single item -->
</div>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Warning! READ THIS</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
If you edit this post then your media content of this blog (photos, videos & audio) will be deleted automaticlly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<form action="/edit_blog/{{blog.id}}" method="post">
<h1>{{blog.id}}</h1>
<button type="submit" class="btn btn-primary">Yes I will edit</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
What is going wrong here?

I should have to give different id to every modal so that every blog modal trigger button can access it's own modal.
I should replace the trigger button code like this -
<button class="mu-blog-nav-btn mu-blog-nav-next" data-toggle="modal" data-target="#{{blog.id}}exampleModalCenter" >Edit Post<span class="fa fa-edit"></span></button>
And the modal id like this -
<div class="modal fade" id="{{blog.id}}exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
That's a very simple solution. You have to make the id to be unique for every modal.
That's it.

Colapsable Button Bootstrap Django

I'm trying to create a social media news feed, with the posts, but I dont want to show the comments just if the user presses the button Show Comments. The problem is that when I press the button of one post, all the post will extend comments. I don't really know how to solve this...
{% for post in posts %}
<div class="container">
<div class="row">
<div class="[ col-xs-12 col-sm-offset-1 col-sm-5 ]">
<div class="[ panel panel-default ] panel-google-plus">
<div class="panel-heading">
<img class="[ img-circle pull-left ]" width="50" height="50" src="{{post.author.profile.image.url}}" alt="Mouse0270" />
<h3 class="author">{{post.author}}</h3>
<h5><span>Shared publicly</span> - <span> {{post.date_posted}} </span> </h5><br>
</div>
<div class="panel-body">
{% if user == post.author %}
<a class="text-right" href="{% url 'post-update' post.id %}"><p>Update</a>
<a class="text-danger text-right" href="{% url 'post-delete' post.id %}">Delete post</a>
{% endif %}
<p>{{post.content}}</p>
{% if post.image %}
<img src ="{{post.image.url}}" width="300" height="300" border="0" class="img-thumbnail">
{% endif %}
{% if post.video %}
<video width="250" controls >
<source src="{{post.video.url}}" type="video/mp4" >
</video>
{% endif %}
</div>
<br/>
<div class="container" >
<button class="btn btn-primary">Add comment</button>
</div>
<br>
<button type="button" class="btn btn-danger btn-block" data-toggle="collapse" data-target="#demo">See comments</button>
<div id="demo" class="collapse">
{% for comment in post.comments.all %}
<div class="container">
<div class="row">
<div class="col-sm-5">
<div class="panel panel-default">
<div class="panel-heading">
<strong>{{comment.author}}</strong> <span class="text-muted">commented at {{comment.created_on|date:"d M g:i a"}}</span>
</div>
<div class="panel-body">
<img class=" img-circle" width="30" height="30" src="{{comment.author.profile.image.url}}">
{{comment.body}}
</div><!-- /panel-body -->
</div><!-- /panel panel-default -->
</div><!-- /col-sm-5 -->
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
The problem is with the collapsable button above {% for comment in post.comments.all %}, but I dont know how to make it unique for every post.

how to save a select item in django

how to save a select item with a background color in a django of a display list of listed project items i was trying to use javascript queryselectors but it kept on selecting the frist project item with a green background indicating the project was taken, i wanted it done but clicking on a particular project id changing it background to green as indication that project has already been. am open to suggestions dont know what am doing wrong
{% if latest_question_list %}
{% for question in latest_question_list %}
<div class="container">
<div class="row example" id="posted-projects">
<div class="col-sm-2 text-center">
<img src="{% static 'img\profile.png' %}" width="60"/>
</div>
<div class="col-sm-2 text-center">
<br>
<span class="glyphicon glyphicon-pencil"></span> Edit
<br>
</div>
<div class="col-sm-2">
<br>
<button type="button" class="btn btn-default btn-sm btn-block"><span class="glyphicon glyphicon-trash"></span> Remove</button>
</div>
<div class="col-sm-2">
<br>
<button onclick="myFunction()" type="button" class="btn btn-default btn-sm btn-block"><span class="glyphicon glyphicon-briefcase"></span> Take Project</button>
</div>
<div class="col-sm-4">
<br>
<a class="btn btn-default btn-sm btn-block" href="{% url 'explore:detail' question.id %}">{{ question.question_text }}</a>
<br>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No project are available.</p>
{% endif %}

Jinja2 and Bootstrap carousel - "item active"

I'm new to Jinja and this is my first post here on Stack Overflow.
I'm trying to loop through a gallery of images handled by bootstrap carousel/modal. I was able to let it work; <img> and <div> are rendered correctly, however I can't loop through the active element. Searching the web, I found that macros can help achieve it but I'm not familiar with using them. Here's the code I'm working on:
<div class="modal fade" id="myModalGal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Wrapper for slides -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
{% for content in porte %}
{% if content.gal_porte %}
<img src="{{content.gal_porte}}" class="img-responsive" alt="test">
<div class="carousel-caption"></div>
</div>
<div class="item">
{% elif content.gal_porte %} <img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
{% endif %}
{% endfor %}
</div>
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev"> <i class="fa fa-arrow-left"></i>
</a> <a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next"> <i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>

Jinja for loops have counters so you can check if you are on the first iteration of the loop and make that one the active slide.
Something like this:
<div class="carousel-inner">
{% for content in porte %}
<div class="item{% if loop.index == 1 %} active{% endif %}">
<img src="{{content.gal_porte}}" class="img-responsive" alt="test1">
<div class="carousel-caption"></div>
</div>
{% endfor %}
<!-- Controls -->
<a class="home-icon left" href="#carousel-example-generic" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
<a class="home-icon right" href="#carousel-example-generic" role="button" data-slide="next">
<i class="fa fa-arrow-right" style="text-align: right;"></i>
</a>
</div>

Passing a python Value into form through a button ref in Django

I'm using the following view function to iterate over 3 values (Channels_collection) within a form:
def index(request):
template = loader.get_template('adray/home page.html')
Channels_collection = ['You Tube', 'Google search', 'Google search']
return render(request, 'adray/home page.html', {'Channels_collection': Channels_collection})
Within the home page.html, i'm creating 3 bootstrap modals using a for loop using the 3 of the values that were passed by the view.
These modals, that are launched through a button, (the "start test" button, its really a link) redirect the user into another input data form, as following:
{% extends "base.html" %}
{% block content %}
<div id="page-inner">
<div class="row">
{% for channel_type in Channels_collection %}
<div class="panel panel-default">
<div class="panel-heading">
Testing {{ channel_type}}
</div>
<div class="panel-body">
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Click To launch {{ channel_type}} Experiment
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Set Up {{ channel_type}} Experiment</h4>
</div>
<div class="modal-body">
Welcome to our tests, set up your experiment for {{ channel_type}} </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<form action="{% url 'input_data' %}" method="POST">
Start Test
</form>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
Each iteration of the modal has its own channel_type value, my question is:
How can i save the value of channel type, when the button is being clicked?
Any help on that would be great!