Need help with Edit link in a display table to update on the same page

[rajibkd]

I am very new to web development and trying to develop a web application. I am kind of stuck at a point. The page let the user insert through a form in mysql database and display the values in a display table on the same page. The display table has edit link for each row , when edit link is clicked then the insert form should display the values based on the id and let the user to edit the values and save the new values in the database.And the display table should be updated to after updating the form.

 

<div class="main-bod">
    <h1>District Entry Form</h1>
    <div class="row">
        <div class="col-md-6">
            <form action="<?php echo($config["url"]["actions"]."district-entry.php") ?>" method="post" class="entry-form">
                <label>District ID:</label>
                <input type="text" name="id" value="" readonly>
                <label>Name of District:</label>
                <input type="text" name="name" autofocus required>
                <center>
                    <button type="submit"><i class="fa fa-check"> </i> Save</button>
                    <button type="reset" name="reset"><i class="fa fa-undo"> </i> Reset</button>
                </center>
            </form>
        </div>
        <div class="col-md-6">
            <table class="settings-table">
                <thead>
                    <tr>
                        <th>District ID</th>
                        <th>Name of District</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                        $conn = new mysqli(DB_SERVER, DB_USER, DB_PASS, DB_NAME);
                        
                        if ($conn->connect_error) {
                            die("Connection failed: " . $conn->connect_error);
                        } 

                        $sql = "SELECT id, name FROM district";
                        $result = $conn->query($sql);

                                         if ($result->num_rows > 0) {
                            while($row = $result->fetch_assoc()) {
                                echo "<tr><td>".$row["id"]."</td><td>".$row["name"]."</td><td><a href=\"".$_SERVER['REQUEST_URI']."/" . $row["id"] . "\"><i class=\"fa fa-edit\"> </i> Edit</a></td></tr>";
                            }
                        }
                        $conn->close();
                    ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
    $("input[name=id]").val(parseInt($("tr:last").find("td:first-child").html())+1);
</script>