Ajax не реагирует на вторую и последующие кнопки из цикла while php

В php вытаскиваю данные из БД через цикл while в блок с информацией, в котором есть кнопка Подробнее, чтобы перейти на страницу именно в этой записью. Переменная $date это просто отфармотированная под нужный вид дата.

$sql=mysqli_query($connect, "SELECT * FROM `event` ORDER BY `date_event` DESC");
    while ($res=mysqli_fetch_array($sql)) {
        
$event = sprintf('

<div class="event">
    <img src="%s">
    <h1>%s</h1>
    <h2>Дата: %s</h2>
    <p>%s</p>
    <button id="more_event" value="%s">Подробнее</button>
</div>
<br>
',$res['img_event'], $res['title_event'],$date, $res['description_event'],$res['id_event']);
echo $event;
}

Далее ловлю клик на кнопку и передаю айди записи в файл event.php с помощью ajax.

$(document).ready(function(){  

    $('#more_event').click(function(){  
    id=$(this).val();
    $.post('event.php', {id:id}, function(html){$('#events').html(html)
    });
    });});    

Проблема в том, что когда кликаешь на первую кнопку все нормально, но со второй и последующими не происходит вообще ничего. Скрипт вставлял и перед циклом, и после, и даже в сам цикл умудрился запихнуть. Сталкивался с этой проблемой и раньше, но абсолютно не помню, как решал ее. Помогите новичку разобраться


Ответы (1 шт):

Автор решения: Виктор

Делайте так:

<button class="more_event" value="%s">Подробнее</button>

....

$('.more_event').click(function() ...

И будет Вам Счастье

→ Ссылка