Unable to get the updated table values when jquery is used to get the html() attributes

I have a table which is loaded from database. When a user updates the text boxes in the table, i have written a jquery which should collect the updated values from the HTML table and wanted to update them back to database. Need help in fixing the jquery to get the updated values from the form. Below written Jquery doesn't give me updated html values when i fill a form and try to run the Jquery.

HTML

<div class="panel-body">
                            <table id="myTable" class="table table-striped table-hover table-sm" cellspacing="10" width="100%" style="font-size: 14px; height: auto">
                                <thead>
                                    <tr style="text-align: right;">
                                        <th>Key Type</th>
                                        <th>Key</th>
                                        <th>Value</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for result in results %}
                                    <tr>
                                        <td>{{result["Key Type"]}}</td>
                                        <td>{{result["Key"]}}</td>
                                        <td><input type="text" value={{result["Value"]}} style="text-align: center;"></td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <div class="col-md-4">
                                <input type="submit" id="Save" align="center" class="btn btn-primary" style="width:150px" value="SAVE">
                                <input type="reset" id="Reset" align="center" class="btn btn-primary" style="width:150px" value="CANCEL">
                            </div>
                        </div>

Jquery

<script type="text/javascript">
    $(function () {
        var dataArr = [];
        $("td").each(function () {
            dataArr.push($(this).html());
        });
        $('#Save').click(function () {
            $.ajax({
                type: "POST",
                headers: { "Content-Type": "application/json" },
                url: "/SaveFile",
                data: JSON.stringify(dataArr),
                success: function (response) {
                    console.log(response);
                },
                error: function (response, error) {
                    console.log(response);
                    console.log(error);
                }
            });
        });
    });
</script>

Changes Made

<script type="text/javascript">
    $(function () {
        $('#Save').click(function () {
            var dataArr = [];
            $("td").each(function () {
                dataArr.push($(this).html());
            });
            $.ajax({
                type: "POST",
                headers: { "Content-Type": "application/json" },
                url: "/SaveFile",
                data: JSON.stringify(dataArr),
                success: function (response) {
                    console.log(response);
                },
                error: function (response, error) {
                    console.log(response);
                    console.log(error);
                }
            });
        });
    });
</script>