2nd modal window doesn't show up

Question

I have added 2 modal windows using bootstrap. 1st for adding the user to database and the 2nd one is to edit one. So the first one works perfectly but the one which is responsible for editing the user is not showing up (it just darkens the screen).

here is the code:

Modals

<!--MODAL-->
<div class="modal fade" id="user-modal" 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">Add User</h5>
          
        </div>
        <div class="modal-body" id = "modal-body">
          <div id = "add-user-form">
            <form action="">

            <div class="col-12">
              <label for="yourUsername" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" name="username" class="form-control" id="add-username" placeholder = "Username..." required>
                <div class="invalid-feedback">Please enter your username.</div>
              </div>
            </div>
            <div class="col-12">
              <p id ="unique-user-error"></p>
              <label for="yourUsername" class="form-label">Role</label>
                <label class="col-sm-2 col-form-label">Select</label>
                <div class="col-sm-10">
                  <select class="form-select" aria-label="Default select example" id = "add-role-option">
                    <option value="Programmer">Brogrammer</option>
                    <option value="REngineer">Robotic Engineer</option>
                    <option value="NEngineer">Network Engineer</option>
                  </select>
                </div>
                
          </form>
        </div>
            
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id ="close-modal-button" >Close</button>
          <button type = "button" data-dismiss = "modal " class="btn btn-success" id ="add-user-button" >Add</button>
        </div>
      </div>
    </div>
  </div>


  <!--MODAL FOR EDITING USER INFO-->
  <div class="modal fade" id="edit-user-modal" tabindex="" role="dialog" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="editUserModalLabel">Add User</h5>
          
        </div>
        <div class="modal-body" id = "modal-body">
          <div id = "edit-user-form">
            <form action="">

            <div class="col-12">
              <label for="yourUsername" class="form-label">Username</label>
              <div class="input-group has-validation">
                <span class="input-group-text" id="inputGroupPrepend">@</span>
                <input type="text" name="username" class="form-control" id="edit-username" placeholder = "Username..." required>
                <div class="invalid-feedback">Please enter your username.</div>
              </div>
            </div>
            <div class="col-12">
             
              <label for="yourUsername" class="form-label">Role</label>
                <label class="col-sm-2 col-form-label">Select</label>
                <div class="col-sm-10">
                  <select class="form-select" aria-label="Default select example" id = "edit-role-option">
                    <option value="Programmer">Brogrammer</option>
                    <option value="REngineer">Robotic Engineer</option>
                    <option value="NEngineer">Network Engineer</option>
                  </select>
                </div>
                
          </form>
        </div>
            
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn btn-primary" id ="close-modal-button" >Close</button>
          <button type = "button" data-dismiss = "modal " class="btn btn-success" id ="add-user-button" >Add</button>
        </div>
      </div>
    </div>
  </div>
  <!--END OF THE MODAL-->

buttons:

<button class = "btn btn-primary" data-toggle="modal" data-target="#user-modal" > <i class= "bi bi-plus"></i>Add user</button>

<button type = "button" class = "btn btn-info edit-user" data-toggle ="modal" data-target = "#edit-user-modal"><i class="bi bi-pencil"></i></button>

my imports:

  <!-- Bootstrap JavaScript -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <!-- Template Main JS File -->
  <script src="{%  static 'core/js/main.js'%}"></script>

How do i fix it?

Answer 1

The issue is that you did not close the <div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> tag for both the modals(Add User and Edit User).

The reason for the Add User Modal to work is that it might be picking the closing tag somewhere from the other tags. (If you interchange the Modal templates up and down you'll find that the one on top will show up and the other one doesn't).

Close the tags properly and it will work. You can verify the working code here

P.S.: You missed giving the Edit button a name.