Fetch data from database and display in multiple HTML textbox

Please help me. I got some problem in my code. I want to display data from database in existing multiple textbox on the same page after I click search button. But when I click the search button, it load the page and go to another page then only the result display. I want it to be display in the same page without refreshing the browser. Below is my code

I have 2 buttons here as for the search button will read the searchDetails.php file, while submit button will read customer.php file. I put it in one form as at the end, the user need to submit all the data after they fill in the field if only after there is no data exist in database after they search. Please help me as I am new in code and I have tried this for weeks

<pre><form id = "Form1" action="customer.php" method = "POST">
 <div class="row">
  <div class="column left" style="background-color:transparent">
   <div class="container">
    <div class="row">
     <div class="col-01">
      <label for="icno">ID No :</label>
     </div>
     <div class="col-02">
      <div class="input-group">
       <input type="text" id="customerid" name="customerid" value = "<?php if(isset($_POST['customerid'])){echo $_POST['customerid'];} ?>"  class="form-control" aria-describedby="basic-addon2" required >
       <div class="input-group-append">
        <button type="button" id ="searchID" name = "searchID" onclick="searchForm('searchDetails.php')" class="btn btn-primary">
          Name :</label>
    </div>
    <div class="col-02">
     <input type="text" id="customername" name="customername" required>
    </div>
   </div>

   <div class="row">
   <div class="col-01">
    <label for="name">^__b>Address  :</label>
   </div>
   <div class="col-02">
    <input type="text" id="customeraddress" name="customeraddress" required>
   </div>
  </div>

   <div class="row">
    <div class="col-01">
     <label for="name">^__b>Phone number:</label>
    </div>
    <div class="col-02">
     <input type="text" id="customerhpnum" name="customerhpnum">
    </div>
   </div>
   <div align="center">
    <input class="button1" type = "submit" name = "insert"  value = "SUBMIT">
   </div>
</form>

$('#searchID').on('click', function(){
$.ajax({
    type    : "POST",
    url     : 'searchDetails.php',
    data:{
        customerid:document.querySelector('input[name="customerid"]').value
    },
    success : function(data)
    {
      var response = JSON.stringify(data);
      $('#customername').val(response[0]);
      $('#customeraddress').val(response[1]);
      $('#customerhpnum').val(response[2]);
    },
});
});

<pre> <?php
include($_SERVER['DOCUMENT_ROOT'].'/customer/include/config.php');

if(isset($_POST['customerid'])){
  $searchValue = $_POST['customerid'];                                   
  $query="SELECT * FROM customer WHERE customerID= '$searchValue'";
  $result = mysqli_query($con, $query) or die(mysqli_error($con,$query));

  while($row = mysqli_fetch_array($result)){
      echo $row['customername'];
      echo $row['customeraddress'];
      echo $row['customerhpnum'];
}
}else{
   echo "<script type='text/javascript'>alert('No Record');</script>";
}