Modal doesn't show

Question

So I was trying to work on the delete button of the table. But when I tried it, it doesn't show up. I'm using bootstrap, JQuery 3.1.1. Here is the codes.

The link is here in Fiddle

<tr>
  <td>00002</td>
  <td>PFR</td>
  <td>Metro</td>
  <td><button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button></td>
  <td><button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button></td>
</tr>

  <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
      <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
    </div>

    <div class="modal-body">
      <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

    </div>
    <div class="modal-footer ">
      <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
      <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
    </div>
  </div>
  <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->

And the JQuery

$("button.btnDelete").click(function() {
    console.log("Delete!");
    $("#modalDelete").modal("show");
});

Answer 1

It is because your ModalDelete is inside your ModalEdit .

Look at it here

<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div> <---- THIS WAS MISSING
<div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">

Answer 2

You missed one closing </div> for edit modal

FIDDLE

Answer 3

Replace your HTML code with this one and it will work for for sure..!!

<table id="mytable" class="table table-bordred table-striped">
  <thead>

    <th>ID</th>
    <th>Brand</th>
    <th>Desc</th>
    <th>Edit</th>
    <th>Delete</th>
  </thead>
  <tbody>
    <tr id="one">
      <td>00001</td>
      <td>BI</td>
      <td>Provincial</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>

    <tr>
      <td>00002</td>
      <td>PFR</td>
      <td>Metro</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>


    <tr>
      <td>00003</td>
      <td>PTDS</td>
      <td>Luxury</td>
      <td>
        <button type="button" class="btn btn-primary btnEdit"><i class="fa fa-pencil"></i> </button>
      </td>
      <td>
        <button type="button" class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> </button>
      </td>
    </tr>
  </tbody>
</table>



<div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
        <h4 class="modal-title custom_align" id="Heading">Edit Bus Detail</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <input class="form-control " type="text" id="txtBusName" name="txtBusName" placeholder="">
        </div>
        <div class="form-group">
          <input class="form-control " type="text" id="txtBusDesc" name="txtBusDesc" placeholder="">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
    </div>  
  <!-- /.modal-dialog -->
  <div class="modal fade" id="modalDelete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
          <h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
        </div>

        <div class="modal-body">
          <div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>

        </div>
        <div class="modal-footer ">
          <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
          <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
    </div>