Updating / deleting data in a Google sheet using HTML and JS

Question

I have created a an HTML form that submits the data to a Google sheet, however, I would like to be able to edit/delete data that has already been submitted to the form. Also, if I clear the spreadsheet manually, the sheet won't add the new data to the top, rather it continues below where the data was deleted. Here is what I've done so far: (I am only familiar with JS and HTML).

<form>
        <fieldset>
            <legend><b>Details</b></legend>
            <label>First Name </label><input id = "fname" type="text" autofocus="" placeholder="Enter first name" name = "fname" required><br><br>
            <label>Last Name </label><input type="text" id = "lname" name = "lname" placeholder="Enter last name"><br><br>
        </fieldset>

        <fieldset>
            <legend><b>Classes</b></legend>
            <label>Morning Class </label><input type="text" id = "mClass" name = "mClass">  <br> <br>
            <label>Afternoon Class </label><input type="text" id = "aClass" name = "aClass"> <br> <br>  
        </fieldset>

        <fieldset>
            <legend><b>Comments</b></legend>
            <label>Additional Comments:</label>
            <textarea id = "feedback" name="feedback" rows="2" cols="60"></textarea><br>
        </fieldset>

        <br>
        <input type="reset" value="Reset">
        <button id="ButtonSubmit" onclick="postContactToGoogle()" type="button" >Submit</button> 

    </form>

<script>
function postContactToGoogle() {
            var fname = $('#fname').val();
            var lname = $('#lname').val();
            var mClass = $('#mClass').val();
            var aClass = $('#aClass').val();
            var feedback = $('#feedback').val();

                $.ajax({
                    url: "https://docs.google.com/forms/d/14_aPkvMTZ8AJhSbh24iOOG78zLQHnOonmKZmvYocVvQ/formResponse",
                    data: { "entry_1882563633": fname, 
                    "entry_158323412": lname, "entry_1807185510": 
                    mClass, "entry_1606058159": aClass, "entry_326563345": feedback},
                    type: "POST",
                    dataType: "xml",
                    statusCode: {
                        0: function () {
                            window.location.replace("AddStudent.html");
                        },
                        200: function () {
                            window.location.replace("AddStudent.html");
                        }
                    }
                });
        }
</script>