Why is the AJAX script not working correctly?

Question

AJAX

$('#search').on('click', function () {
            $.ajax({
                type: 'POST',
                url:'test',
                data: {
                    myDate: $('#data').val()
                },
                success: function (data) {
                    if (data == 'no records' || data == 'Invalid date')
                    {
                        $('p.alert').show();
                        $('p.alert').html('<strong>Warning!</strong> '+data);
                        setTimeout(alertControl, 3000);
                    }
                    else {
                        data = JSON.parse(data);
                        $('#myTable').empty();
                        $.each(data, function (index, value) {
                            $('#myTable').append("<tr class='text-left'>");
                            $('#myTable').append("<td style='padding: 10px;'>" + value['row1'] + "</td>");
                            $('#myTable').append("<td style='padding: 10px;'>" + value['row2'] + "</td>");
                            $('#myTable').append("<td style='padding: 10px;'>" + value['row3'] + "</td>");
                            $('#myTable').append("<td class='padding'><button id='delRow' class='btn btn-danger' data-index='"+index+"' data-id='"+value['id']+"'>X</button></td>");
                            $('#myTable').append("</tr>");
                        });
                    }
                }
            });
        });

        $('#derRow').on('click', function () {
            alert($(this).attr('data-id'));
            });
        });

It generates a table and all the data, but when you click on the button of each row, it should display the id of the row in the alert, and it only displays the 1st row, the rest do not respond
. What did I miss?

Answer 1

HTML should not have multiple elements with the same id, use classes.