Почуму AJAX скрипт не работает корректно?

Question

[good_beginer]

$('#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'));
            });
        });

Таблицу и все данные генерирует но при клике на кномку каждого ряда должен выводится в алерт id ряда а выводит только 1й ряд, остальные не реагируют
Что я пропустил?

Answer 1

[Rsa97]

В HTML не должно быть нескольких элементов с одинаковыми id, используйте классы.

Comments

[good_beginer]

Спасибо, ступил серьёзно)