CRUD either edit or delete work, together will fail

Question

I am developing a CRUD function based on bootstrap and php. If click edit button, popup windows will be shown and data can edit and update. If click delete button, popup windows will be shown with data but only allow to confirm delete . I dont know why if run it individually only contains one part of code, the program is running properly. But if put both functions code together, only edit function work, and delete function will not shown any data in the popup windows. Also it is strange that when click confirm delete, it is not direct to delete sql statement (delcatsql.php), but direct to update sql(editcatsql.php). Can advice what is wrong?? Thanks!

**manage_categories.php**

<tbody> 
    <?php
    require_once 'source/db_connect.php';
    $sql = "SELECT * FROM category";
    $result = mysqli_query($link, $sql);
     $i=0;
    if ($result->num_rows > 0) {
            //output data of each row
            while ($row = $result->fetch_assoc()) {
            $i = $i + 1;
    ?>
    
                <tr>
                <td><?php echo $row['catid']; ?></td>
                <td><?php echo $row['catname']; ?>  </td>
                <td> <button type="button" id="editcatbtn" class="btn btn-primary 
editcatbtn">edit</button>  </td>
                <td> <button type="button" id="delcatbtn" class="btn btn-danger delcatbtn" 
>Delete</button>  </td>
                        
                </tr>   
                
    <?php       }
        }
    ?>

 <script>
 $(document).ready(function () {
 $(' .delcatbtn').on('click', function() {
    $('#delcatmodel').modal('show');
         $tr = $(this).closest('tr');
             var data = $tr.children("td").map(function() {
                return $(this).text();
             }).get();
             console.log(data);
             $('#catid').val(data[0]);
            $('#catname').val(data[1]); 
});
});
</script>

<script>
 $(document).ready(function () {
$(' .editcatbtn').on('click', function() {
    $('#editcatmodel').modal('show');
         $tr = $(this).closest('tr');
             var data = $tr.children("td").map(function() {
                return $(this).text();
             }).get();
             console.log(data);
            bootstrap
             $('#catid').val(data[0]);
            $('#catname').val(data[1]); 
});
});
</script>
            
</tbody>
</table>
</div>
<?php
//Categpry Form
include_once("editcatmodel.php");
include_once("delcatmodel.php");
include_once("editcategory.php");
 ?>
</body>


**editcatmodel.php**
<!-- edit Model -->
<div class="modal fade" id="editcatmodel" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel2">Edit Category</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  
  <form action="editcatsql.php" method="POST">
  
 
  <div class="modal-body">
       <input type="hidden" name="editcatid" id="catid">
       
       <div class="form-group">
        <label>Category Name</label>
        <input type="text" name="editcatname" id="catname" class="form-control">
      </div>

  </div>
  
  
  <div class="modal-footer">
     <button type="submit" name="editcategory" class="btn btn-primary">Edit</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
   </div>
  </div>
 </div>
<!-- /.modal -->


editcatsql.php
<?php
include_once 'source/session.php';
require_once 'source/db_connect.php';
?>
<?php
 $username = 'root';
password = '';
$dsn = 'mysql:host=localhost; dbname=pos';
$link = mysqli_connect("localhost", "root", "", "pos");

if (isset($_POST['editcategory'])) {
    $tempcatname = $_POST[('editcatname')];
    $tempcatid = $_POST[('editcatid')];

// write edit query
$sql = "UPDATE category SET catname='$tempcatname' WHERE catid='$tempcatid'" ;
$result = $conn->query($sql);

if(! $result )
{
            die('Could not update data: ' . mysql_error());
        }
    header('location: manage_categories.php');
}
?>

**delcatmodel.php**
<!-- Delete Model -->
<div class="modal fade" id="delcatmodel" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel2">Confirm Delete Category?</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  
  <form action="delcatsql.php" method="POST">
  
 
  <div class="modal-body">
       <input type="hidden" name="delcatid" id="catid">
       
       <div class="form-group">
        <label>Category Name</label>
        <input type="text" name="delcatname" id="catname" class="form-control" disabled>
      </div>

  </div>
  
  
  <div class="modal-footer">
     <button type="submit" name="deletecategory" class="btn btn-primary">Delete2</button>
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
</div>
</div>
</div>
<!-- /.modal -->

delcatsql.php
<?php

 include_once 'source/session.php';

 require_once 'source/db_connect.php';
?>


<?php


 $username = 'root';
 $password = '';
 $dsn = 'mysql:host=localhost; dbname=pos';
$link = mysqli_connect("localhost", "root", "", "pos");

if (isset($_POST['deletecategory'])) {

$tempcatname = $_POST[('delcatname')];
$tempcatid = $_POST[('delcatid')];
        
// write delete query
//$sql = "delete from category where catid='$tempcatid'" ;

$sql = "delete from category where catid='$tempcatid'" ;
$result = $conn->query($sql);

if(! $result )
{
        die('Could not update data: ' . mysql_error());
}
        header('location: manage_categories.php');
}
?>