How to submit value datatable in asp.net using jquery ajax

My datatables have 1 input column, to input return date of movie rental, I want to post that values to my ASP.NET [POST] action, but before I post it, I tried to see the date data first in console log, and using url with get method. at the first row it work correctly but in the next line my input data is empty

My HTML:

<table id="newrentals" class="table table-bordered table-hover" style="width:100%">
    <thead>
        <tr>
            <th>Customer name</th>
            <th>Date Rented</th>
            <th>Date Returned </th>
            <th>Movie name</th>
            <th>Rental Price</th>
            <th>Command</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

My DataTable and submit function:

<script>
    $(document).ready(function () {
        var table = $("#newrentals").DataTable({
            ajax: {
                url: "/api/newrentals",
                method: "GET",
                dataSrc: ""
            },
            columns: [
                {
                    data: "customer.name"
                },
                {
                    data: "dateRented"
                },
                {
                    data: "dateReturned",
                    render: function (data, type, newrentals) {
                        if (data == null)
                            return "<input required id='dateReturned-id' name='dateReturned1' type='text' class='form-control'>"
                                + "< button class='btn btn-primary js-submit1' data - returned - id=" + newrentals.id + " > Returned</button > ";
                               
                        return "<input id='dateReturned' name='dateReturned' type='text' class='form-control' value=" + data + ">";
                    }
                },
                {
                    data: "movie.name"
                },
                {
                    data: "movie.rentalPrice"
                },
                {
                    data: "id",
                    render: function (data,type, newrentals) {
                        return "<button class='btn btn-primary js-submit2' data-submit-id=" + data + ">Submit payment</button>";
                    }
                }
            ]
        });

        /////////////////////////////// SUBMIT THE TEXT BOX INPUT try to see the data first in console log ///////////////////////////
        $("#newrentals").on("click", ".js-submit1", function () {
            var button = $(this)
            bootbox.confirm("Are you sure to add return date?", function (result) {
                if (result) {
                    var dateVal = $("#dateReturned-id").val();
                    $.ajax({
                        url: "/api/newrentals/" + button.attr("data-returned-id") + "/allrent",
                        method: "GET",
                        success: function () {
                            console.log(dateVal);
                            console.log(button.attr("data-returned-id"));

                        }
                    }).done(function () {
                        $("#dateReturned").val("");
                    });
                }
            });
        });
        
    });
</script>

My web page:

Rental Web page

When I try to fill data in another row except first row, my input data is empty but didn't get any error, can any one help me with this problem? Thanks in advance