I am using below form to get already updated user data..

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Update Profile</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
     <label>Username</label>
     <input type="text" name="user_name" id="user_name" class="form-control" readonly/>
     <br />
     <label>Division</label>
     <input name="user_div" id="user_div" class="form-control"/>
     <br />
     <label>Mobile Number</label>
     <input name="user_num" id="user_num" class="form-control" onkeypress="validate(event)"/>
     <br />
     <label>User Type</label>
     <input name="user_type" id="user_type" class="form-control" readonly/>
     <br />
     <label>User Status</label>
     <input name="user_status" id="user_status" class="form-control" readonly/>
     <br />
     <input type="hidden" name="employee_id_return" id="employee_id_return" />
     <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />

    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

I am using below button to click and popup above form whenever I required…

 <input type="button"  name="edit" value="<?php echo htmlspecialchars($_SESSION["username"]); ?>" id="<?php echo htmlspecialchars($_SESSION["id"]); ?>" class="btn btn-info btn-xs edit_data" > <img src="./assets/images/logo.png" width="35" height="35" style="vertical-align:middle;"/>

After clicking above button I am using below Ajax to popup the form and show the required data..

$(document).ready(function(){  
      $('#add').click(function(){  
           $('#insert').val("Insert");  
           $('#insert_form')[0].reset();  
      });  
      $(document).on('click', '.edit_data', function(){ 
           var row_id = $(this).attr("id");  
           $.ajax({  
                url:"userdetail.php",  
                method:"POST",  
                data:{row_id:row_id},  
                dataType:"json", 
                success:function(data){  
                     $('#user_name').val(data.username);  
                     $('#user_div').val(data.division);  
                     $('#user_num').val(data.mobnum);  
                     $('#user_type').val(data.usertype);  
                     $('#user_status').val(data.userstatus); 
                     $('#employee_id_return').val(data.row_id);  
                     $('#insert').val("Update");
                     $('#add_data_Modal').modal('show'); 
                    
                        
                      
                }  
           });  
      });  
      $('#insert_form').on("submit", function(event){  
           event.preventDefault();  
           //after submitting...
           if()  
           {  
                alert();  
           }
           else if()  
           {  
                alert();  
           }    
        
           else  
           {  
                $.ajax({  
                     
                });  
           }  
      

          });
    });

But the issue is whenever I click the button I could not see the popup window with form. I made an alert after button click as below and identify that the button will be clicked as well.

$(document).on('click', '.edit_data', function(){ 
           var row_id = $(this).attr("id"); 
           alert(row_id);
           $.ajax({  
                url:"userdetail.php",  
                method:"POST",  
                data:{row_id:row_id},  
                dataType:"json", 
                success:function(data){  
                     $('#user_name').val(data.username);  
                     $('#user_div').val(data.division);  
                     $('#user_num').val(data.mobnum);  
                     $('#user_type').val(data.usertype);  
                     $('#user_status').val(data.userstatus); 
                     $('#employee_id_return').val(data.row_id);  
                     $('#insert').val("Update");
                     $('#add_data_Modal').modal('show'); 
                    
                        
                      
                }  
           });  

But whenever I used my input button as below instead of previously mentioned way, I could see the popup window, but no any data..

<input type="button" data-toggle="modal" data-target="#add_data_Modal" name="edit" value="<?php echo htmlspecialchars($_SESSION["username"]); ?>" id="<?php echo htmlspecialchars($_SESSION["id"]); ?>" class="btn btn-info btn-xs edit_data" > <img src="./assets/images/logo.png" width="35" height="35" style="vertical-align:middle;"/> 

Here is my userdetail.php and table structure..

<?php  
     
     $connect = mysqli_connect("localhost", "root", "", "project");  
     if(isset($_POST["row_id"]))  
     {  
          $query = "SELECT id,username,usertype,division,mobnum,userstatus,date(created_at) as created_at FROM users WHERE id = '".$_POST["row_id"]."'";  
    
          $result = mysqli_query($connect, $query);  
          $row = mysqli_fetch_array($result);  
          echo json_encode($row);  
     }  
     ?>

My database structure is as follows,

    CREATE TABLE `users` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(50) NOT NULL,
      `password` varchar(255) NOT NULL,
      `created_at` datetime DEFAULT current_timestamp(),
      `usertype` int(11) NOT NULL DEFAULT 0,
      `division` varchar(150) NOT NULL DEFAULT '',
      `mobnum` int(10) DEFAULT NULL,
      `userstatus` varchar(50) NOT NULL DEFAULT 'Active',
      PRIMARY KEY (`id`),
      UNIQUE KEY `username` (`username`)
    ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4