title: How to delete a row and display updated database without refreshing using ajax
body: <p>I have a challenge with a project i'm working on and have tried all i could to get it working without success. Any assistance will be appreciated please.
  I built an HTML/Bootstrap form whose fields value are sent to mysql database with ajax function and displays the updated database on the page without refreshing the page, the part which works fine.
  Each row has a delete button. However, when I delete any of the displayed rows, only the first row I click gets deleted and the updated database displays. Subsequent attempts to delete any other row doesn’t work, until the page is reloaded and the process is repeated then only the first delete operation works again. My challenge is to get the delete button delete a row, fetch and display the updated database immediately without having to refresh the page.
  Here is my ajax call:</p>
  
  <pre><code>var pry= $("#pry").val();
  var sec  = $("#sec").val();
  var coll = $("#coll ").val();
  var urlId = window.location.search.substring(1);    
  var pageId = urlId.split('=')[1];
  
  //Insert into DB
  $.ajax({
  url: "process.php",
  type: "POST",
  async: false,
  data:
    {
     "done": 1,   
     "pry": pry,  
     "sec": sec,                                      
     "coll": coll,
     "page_id": pageId
     },                                           
      success: function(){
           displayFromDb();   
           clearInputs();
      }
  });
  
  //delete from db
  $(".my_butn").on("click", function(e){
      e.preventDefault();
      var id = $(this).attr("id");
  
  $.ajax({
      type: "POST",
      url: "delete.php",
      async: false,
      data:
         {                                         
          "pry": pry, 
          "sec": sec,                                     
          "coll": coll,
          "page_id": pageId,
          “id”: id
         },
           success: function(){
             displayFromDb();
           }
        });
      });
  
  //function displayFromDb
       function displayFromDb(){
         $.ajax({
            type: "POST",
            url: "process.php",
            async: false,
            data:
               {                                                                                                                                                        
                "display": 1,                                             
                "page_id": pageId
               },
            success: function(d){                                                                                                              
                  $("#tab-display").fadeIn().html(d);
            }
         });
      }
  
  //process.php file
  &lt;?php
  //Insert to  sql    
    if (isset($_POST["done"])){
      $conn = mysqli_connect('localhost', 'root', '', 'educ');
      $student_id = mysqli_real_escape_string($conn, $_POST['page_id']);
      $pry = mysqli_real_escape_string($conn, $_POST["pry"]);
      $sec = mysqli_real_escape_string($conn, $_POST["sec"]);
      $coll = mysqli_real_escape_string($conn, $_POST["coll"]);
  
      $sql = mysqli_query($conn, "INSERT INTO students (id, student _id, pry, sec, coll) VALUES (' ', '$student_id ', '$pry', '$sec', '$coll')");
  }
  
  //display from sql  
  if (isset($_POST['display'])){
      $i=1;
      $sql2 = mysqli_query($conn, "SELECT id, pry, sec, coll FROM students WHERE student_id = '$student_id");
      if ($sql2){
          echo '&lt;table class="table table-striped table-bordered"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;S/N&lt;/th&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;PRY EDUC&lt;/th&gt;&lt;th&gt;SEC EDUC&lt;/th&gt;&lt;th&gt;COLL EDUC&lt;/th&gt;&lt;th&gt;DEL ROW&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;';
  
      while ($row = mysqli_fetch_array($sql2, MYSQLI_ASSOC)){
          $id = $row['id'];
          $pry = $row['pry']; 
          $sec = $row['sec'];
          $coll = $row['coll'];
  $del = "&lt;button type='button' class='btn btn-danger' id='$id'&gt; X&lt;/button&gt;";
  echo '&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;'.$i.'&lt;/td&gt;&lt;td&gt;'.$id.'&lt;/td&gt;&lt;td&gt;'.$pry.'&lt;/td&gt;&lt;td&gt;'.$sec.'&lt;/td&gt;&lt;td&gt;'.$coll.'&lt;/td&gt;&lt;td&gt;'.$del.'&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;';
          $i++;
          }
          echo '&lt;/table&gt;';
          }
      }?&gt;
  </code></pre>
  
  <p>And my delete.php file here</p>
  
  <pre><code>  &lt;?php
          $conn = mysqli_connect('localhost', 'root', '', 'educ');
          $student_id = mysqli_real_escape_string($conn, $_POST['page_id']);
          $pry = mysqli_real_escape_string($conn, $_POST["pry"]);
          $sec = mysqli_real_escape_string($conn, $_POST["sec"]);
          $coll = mysqli_real_escape_string($conn, $_POST["coll"]);
          $id =  $_POST["id"];
  
          $sql = mysqli_query($conn, "DELETE FROM students WHERE id = '$id' ");
      }
  ?&gt;
  </code></pre>