Bootstrap Modal Box Not showing in multiple events

Question

I am trying to use Bootstrap modal box in my blog post website. On my Index page I am showing multiple posts and for each post on a button I want to open a modal box but I am not able to make it work.

can some one point out where I am making the mistake

    {% for i in post %}
         <button type="button" class="btn btn-primary" data-toggle="modal" data- 
         target="#exampleModal{{i.post_id}}">
             Launch demo modal
         </button>


        <div class="modal fade" id="exampleModal{{i.post_id}}" tabindex="-1" 
        role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <h1>Yes</h1>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
             dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
{% endfor %}

Answer 1

You have whitespace in your data- target attribute name. If that's fixed your markup works.

html,
body {
  min-height: 100vh;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<button type="button" class="btn btn-primary" data-toggle="modal" 
  data-target="#exampleModal998">Launch demo modal 1</button>

<div class="modal fade" id="exampleModal998" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      
      <div class="modal-body">
        <h1>Yes</h1>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" 
  data-target="#exampleModal999">Launch demo modal 2</button>

<div class="modal fade" id="exampleModal999" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      
      <div class="modal-body">
        <h1>Yes</h1>
      </div>
      
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>