title: javascript functions stop working after writing another function in the same script
body: <p>Im doing am employee leave management system. The approve and disapprove buttons were working fine in the beginning. But after writing the code to show employee details in the same modal, the approve and disapprove buttons stopped working. Now it gives error. Does anyone have an idea on whats wrong?</p>
  
  <p><strong>controller</strong></p>
  
  <pre><code>//admin approve leave 
  public function approveLeave() {
  
      $id = $this-&gt;input-&gt;post('id');
      $result = $this-&gt;Admin_Model-&gt;approve($id);
  
      if(!$result){
  
          // something went wrong
  
          $data = array(
              "value" =&gt; $id,
              "error" =&gt; true,                
              "msg" =&gt; "something went wrong"
          );
  
          $this-&gt;output
          -&gt;set_content_type('application/json')
          -&gt;set_output(json_encode($data));
  
          return;
      }
  
  
      // approved leave
  
      $data = array(
          "value" =&gt; $id,
          "error" =&gt; false,
          "msg" =&gt; "successfully updated"
      );
  
      $this-&gt;output
      -&gt;set_content_type('application/json')
      -&gt;set_output(json_encode($data));
  
  }
  </code></pre>
  
  <p><strong>modal</strong></p>
  
  <pre><code>&lt;!-- Modal --&gt;
      &lt;div class="modal fade" id="pendingLeaveRequest" 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="exampleModalLabel"&gt;Leave Request&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" id="leave_details" &gt;
              &lt;p&gt; &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;input type="hidden" name="current_leave_id" id="current_leave_id" value="" /&gt;
              &lt;button type="button" id="declinebtn" class="btn btn-secondary" data-dismiss="modal"&gt;Decline&lt;/button&gt;
              &lt;button type="button" id="approvebtn" class="btn btn-primary"&gt;Approve&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>javascript</strong></p>
  
  <pre><code>    &lt;script&gt; 
  
      $(function(){
  
      var BASE_URL = "http://localhost/employeemgt/index.php/";
  
  
          $('#pendingLeaveRequest').on('show.bs.modal', function(event) {
              var button = $(event.relatedTarget);
              var current_leave_id = button.data('id');
              var modal = $(this);
  
              modal.find('input[name="current_leave_id"]').val(current_leave_id); 
          });     
  
  
  
          //approve button
          $('#approvebtn').click(function(){              
              var id = $('input[name="current_leave_id"]').val();
                    $.post(BASE_URL +  'admin/AdminDashboardController/approveLeave', 
                      {'id': id}, 
                      function(result){
                          console.log(result);
                      if(result.error){                       
                          alert('try again');
                      }else{
                          alert('Leave has been approved!');
                      }
                  });              
          });
  
  
  
         //disapprove button
          $('#declinebtn').click(function(){              
              var id = $('input[name="current_leave_id"]').val();
                    $.post(BASE_URL +  'admin/AdminDashboardController/disapproveLeave', 
  
                      {'id': id}, 
                      function(result){
                          console.log(result);
                      if(result.error){                       
                          alert('try again');
                      }else{
                          alert('Leave has been disapproved!');
                      }
                  });              
          });
  
          });
  
  
  
          //show leave details on modal
      $('.detailButton').on('click', function(){
      var BASE_URL = "http://localhost/employeemgt/index.php/";
          var leave_id = $(this).val();
          var i;
          $.ajax({
              type: 'POST',
              dataType: "JSON",
              data:{leave_id:leave_id},
              url: BASE_URL + 'admin/AdminDashboardController/viewRequest',   
  
              success:function(data){                 
              console.log(data);
             $('#leave_details').html("&lt;p&gt;" + "Name: " + data[0].user_name + "&lt;/p&gt;" + 
                                    "&lt;p&gt;" + "Leave Type: " + data[0].leave_type + "&lt;/p&gt;"  + 
                                    "&lt;p&gt;" + "Start Date: " + data[0].leave_start + "&lt;/p&gt;"  + 
                                    "&lt;p&gt;" + "End Date: " + data[0].leave_end + "&lt;/p&gt;");       
              $('#pendingLeaveRequest').modal('show');
         },
         error:function(error){
              alert(error);
          }});
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>view</strong></p>
  
  <pre><code>&lt;div id="showleave"&gt;
                  &lt;h4 class="mb-4"&gt;Pending Requests&lt;/h4&gt;
                      &lt;?php
                          foreach ($leave as $row) {  
                          if($row-&gt;status != "1")
                           {                          
                              echo '
                              &lt;ul class="list-unstyled"&gt;
                                  &lt;li class="media border-bottom border-top py-3"&gt;
                                      &lt;img class="mr-3" src="http://via.placeholder.com/64x64" alt="Generic placeholder image"&gt;
                                      &lt;div class="media-body"&gt;
                                        &lt;h5 class="mt-0 mb-1"&gt;'.$row-&gt;user_name.'&lt;/h5&gt;
                                        &lt;p class="mb-0 mt-0"&gt;'.$row-&gt;leave_start.' to '.$row-&gt;leave_end.'&lt;/p&gt;
                                        &lt;p class="mt-0"&gt;'.$row-&gt;leave_type.'&lt;/p&gt;
                                        &lt;button type="button" class="detailButton" href="&lt;?php echo $id; ?&gt;" data-id="'.$row-&gt;id.'" data-name="'.$row-&gt;user_name.'" data-toggle="modal" value="'.$row-&gt;id.'"&gt;View Request&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/li&gt;               
                              &lt;/ul&gt;
                              ';
                          }
                          }
                      ?&gt;
                  &lt;/div&gt;
  </code></pre>