title: How to use Bootstrap 4 popover dynamically in Django?
body: <p>I have a simple Django app similar to a quiz app. I have stored all the questions with answers in the database. Then, I retrieve all the questions in a template using Django ListView. Each question has 4 options and one answer field. Initially, I want to hide the answer and use a Bootstrap 4 popover. When a user click on the popover button the answer will display. I have done all but the popover is not showing the answer when I click the button. Below is my code -</p>
  <pre><code>&lt;div class=&quot;col-md-12 card border-0 mb-2 mt-3 ml-1&quot;&gt;
        &lt;div class=&quot;card-body pl-0 pt-3&quot;&gt;
          {% for topic in topic_list %}
            &lt;h2 class=&quot;mt-0 mb-0&quot;&gt;{{ topic.name }}&lt;/h2&gt;
            
            {% for question in topic.question_set.all %}
              &lt;h6 class=&quot;mb-4&quot;&gt;{{ question.serial_no }}. {{ question.name }}&lt;/h6&gt;
              &lt;div class=&quot;form-check ml-3&quot;&gt;
                &lt;label class=&quot;form-check-label&quot;&gt;
                  &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; name=&quot;optradio&quot;&gt;(A) {{ question.option1 | safe }}
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-check ml-3&quot;&gt;
                &lt;label class=&quot;form-check-label&quot;&gt;
                  &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; name=&quot;optradio&quot;&gt;(B) {{ question.option2 | safe }}
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-check ml-3&quot;&gt;
                &lt;label class=&quot;form-check-label&quot;&gt;
                  &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; name=&quot;optradio&quot;&gt;(C) {{ question.option3 | safe }}
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;div class=&quot;form-check ml-3 mb-4&quot;&gt;
                &lt;label class=&quot;form-check-label&quot;&gt;
                  &lt;input type=&quot;radio&quot; class=&quot;form-check-input&quot; name=&quot;optradio&quot;&gt;(D) {{ question.option4 | safe }}
                &lt;/label&gt;
              &lt;/div&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-container=&quot;body&quot; data-toggle=&quot;popover&quot; data-placement=&quot;right&quot; data-content=&quot;{{ question.answer }}&quot;&gt;
                Show Answer
              &lt;/button&gt;      
            {% endfor %}              
          {% endfor %}
        &lt;/div&gt;
      &lt;/div&gt; 
  </code></pre>