单击后删除按钮

I have a page where the users can view their leave applications, I also have a Cancel button beside it which looks like this:

View Page

What I wanted to happen is that when I click on the cancel button, the status would change and the button would disappear.

I added a script that would make the button disappear and it worked, but it won't update the status.

So here's my form:

<div class="container">
<div class="page-header">
<h3>My Leaves</h3>
            <div class="table-responsive">
                <table class="table">
                    <tr>
                        <th>Employee Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>From</th>
                        <th>To</th>
                        <th>Reason</th>
                        <th>Type</th>
                        <th>Status</th>
                    </tr>
                <?php
                    include ('database.php');
                    $result = $database->prepare ("SELECT leaves.* FROM leaves INNER JOIN employee ON employee.id = leaves.user_id WHERE employee.username = '".$_SESSION["VALID_USER_ID"]."'");
                    $result ->execute();
                    for ($count=0; $row_message = $result ->fetch(); $count++){
                ?>
                    <tr>
                        <td><?php echo $row_message['firstname']." " .$row_message['lastname']; ?></td>
                        <td><?php echo $row_message['phone']; ?></td>
                        <td><?php echo $row_message['email']; ?></td>
                        <td><?php echo $row_message['fromdate']; ?></td>
                        <td><?php echo $row_message['todate']; ?></td>
                        <td><?php echo $row_message['reason']; ?></td>
                        <td><?php echo $row_message['type']; ?></td>
                        <td><?php echo $row_message['status']; ?></td>
                        <td>
                            <form method="post" action="update-leave-status-emp.php">
                                <input type="hidden" name="leaveno" value="<?php echo $row_message['leaveno']; ?>" />
                                <input type="submit" value="Cancelled" class="removebtn" name="cancelled"></input>
                            </form>
                        </td>
                    </tr>
                    <?php    }   ?>
                    
                    </table>
                    
                    <a href="employee_panel.php"><button type="button" class="btn btn-primary"><i class="glyphicon glyphicon-arrow-left"></i> Back</button></a> 
                </div>
            </div>
        </div>    
    </div>
</div>

And here's the script below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
            $(document).ready(function(){
            $(".removebtn").click(function(){
            $(this).remove();
        });
    });
</script>

PHP Code:

<?php

     if(isset($_POST['cancelled']))
    {
        $msg = "Cancelled";
        $status=$_POST['cancelled'];
    }
    $leaveno=$_POST['leaveno'];
    $con = mysqli_connect('localhost', 'root', '');
    mysqli_select_db($con, 'companydb');

    $sql = "UPDATE leaves SET status = '$status' WHERE leaveno = '$leaveno'";

    if(mysqli_query($con, $sql))
        header("refresh:1; url=view-leave-emp.php?msg=$msg");
    else
        var_dump(mysqli_error($con));
    
?>

</div>