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

MyHtml

<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 Before

CodePudding user response：

The reason it only works for the first row is because you are identifying the input using its ID, but all the input IDs are the same and you can only have one element with a particular ID on a page. So JQuery locates the first one it finds and ignores all the others.

Try this instead (I've truncated your code for brevity):

$("#newrentals").on("click", ".js-submit1", function () {
    const button = $(this);
    const dateVal = button.siblings('input').val();
});