title: Jquery: second modal does not active
body: <p>I get some problem that I cannot solve:
  1. first modal at #exampleModal is working fine.
  2. second modal does not work when post data to save at food_action.php but data already save into database but #modal_confirm does not toggle.
  I do not know why. I try to debug and console.log which lines are error.
  Please help.</p>
  
  <p>Best regards</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="assets/dist/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;title&gt;Topup&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-8 mx-auto pt-2"&gt;
                  &lt;a href="" class="btn btn-info"&gt; back&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row justify-content-center"&gt;            
              &lt;div class="col-sm-4 my-5"&gt;
                  &lt;div class="border border-primary rounded" style="height: 335px"&gt;   
                      &lt;div class="text-center pt-5"&gt;&lt;img id="stu_img" src="" class="rounded" style="width: 50px" alt=""&gt;&lt;/div&gt;
                      &lt;h2 class="text-center"&gt;Information&lt;/h2&gt;
                      &lt;dl class="row"&gt;
                          &lt;dt class="col-sm-6 text-right"&gt;ID: &lt;/dt&gt;
                          &lt;dd id="id" class="col-sm-6"&gt;&lt;/dd&gt;
                          &lt;dt class="col-sm-6 text-right"&gt;Name: &lt;/dt&gt;
                          &lt;dd id="name" class="col-sm-6"&gt;&lt;/dd&gt;
                          &lt;dt class="col-sm-6 text-right"&gt;Level: &lt;/dt&gt;
                          &lt;dd id="level" class="col-sm-6"&gt;&lt;/dd&gt;
                          &lt;dt class="col-sm-6 text-right"&gt;Balance: &lt;/dt&gt;
                          &lt;dd id="balance" class="col-sm-6"&gt;&lt;/dd&gt;
                      &lt;/dl&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-4 my-5"&gt;
                  &lt;div class="border border-success rounded" style="height: 335px"&gt;
                      &lt;h2 class="text-center pt-5"&gt;Topup&lt;/h2&gt;
                      &lt;form class="p-3"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Topup&lt;/label&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;span class="input-group-addon"&gt;$&lt;/span&gt;
                                  &lt;input type="number" class="form-control" id="amount" name="card_amount" autofocus required&gt;
                              &lt;/div&gt;
                              &lt;small class="form-text text-muted"&gt;Number only&lt;/small&gt;
                          &lt;/div&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label&gt;Register&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="register" name="who_check" value="admin" readonly&gt;
                          &lt;/div&gt;
                          &lt;button id="btn_submit" type="button" class="btn btn-primary btn-block"&gt;Submit&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title" id="exampleModalLongTitle"&gt;Top up confirm&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="container-fluid"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-10 mx-auto"&gt;
                                      &lt;form&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label&gt;ID&lt;/label&gt;
                                              &lt;input type="text" class="form-control" id="stu_id" readonly&gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label&gt;Amount&lt;/label&gt;
                                              &lt;input type="text" class="form-control" id="stu_topup" readonly&gt;
                                          &lt;/div&gt;                      
                                          &lt;button id="btn_confirm" type="button" class="btn btn-primary"&gt;Confirm&lt;/button&gt;
                                          &lt;button id="btn_cancle" type="button" class="btn btn-warning" data-dismiss="modal"&gt;cancle&lt;/button&gt;
                                      &lt;/form&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;                  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Modal --&gt;
          &lt;div class="modal fade" id="modal_confirm" tabindex="-1" role="dialog"&gt;
              &lt;div class="modal-dialog" role="document"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-header"&gt;
                          &lt;h5 class="modal-title"&gt;Topup complete&lt;/h5&gt;
                          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                              &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                          &lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;div class="container-fluid"&gt;
                              &lt;div class="row"&gt;
                                  &lt;div class="col-sm-10 mx-auto"&gt;
                                      &lt;p id="topup"&gt;&lt;/p&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;                  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt;
  
      &lt;script src="assets/vendor/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/popper.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/vendor/holder.min.js"&gt;&lt;/script&gt;
      &lt;script src="assets/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var stu_id = sessionStorage.getItem("id");
          $(document).ready(function(){
              $.post("food_action.php",
              {
                  list: "list",
                  id: stu_id
              },
              function(data, status){
                  //console.log(data[0].card_id);
                  document.getElementById("id").innerHTML = data[0].card_id;
                  document.getElementById("name").innerHTML = data[0].stu_name;
                  document.getElementById("level").innerHTML = data[0].stu_level;
                  document.getElementById("balance").innerHTML = data[0].card_pocket + " บาท.";
                  $("#stu_img").attr('src', 'assets/img/'+data[0].stu_img);
              }); 
          });
  
          $('#btn_submit').click(function(){
              $('#exampleModal').modal('show');
              $('#stu_id').val(stu_id);
              $('#stu_topup').val($('#amount').val());
          });
  
          $('#btn_confirm').click(function(){
              console.log("press");
              $.post("food_action.php",
              {
                  update: "update",
                  add: "add",
                  id: stu_id,
                  action: "topup",
                  register: $('#register').val(),
                  amount: $('#amount').val()
              },
              function(status){
                  //console.log(xhr.status);
                  if(status = 'success'){
                      console.log(status);
                      $('#exampleModal').modal('hide');
                      $('#modal_confirm').modal('show');
                  }
              });
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>