Как я могу получить значение для конкретного радио

у меня есть форма вроде:

<div class = "col-md-12 col-lg-12 col-xs-12 padding_left_right_none padt18">
<?php foreach ($events['rows'] as $key => $value) { ?>
<div class = "col-md-3">
<p class = "event_id_data">
<input type = "radio" name = "event_id" id = "event_id" value = " <?php echo $value->id; ?>" >
<?php echo $value->id; ?>
</p>
</div>
<?php } ?>
</div>

и для значения радио я использую этот код при щелчке по тегу p, но он возвращает мне значение как undefined

<script type = "text/javascript">
   $(document).ready(function(){
      $('input[name=event_id]').hide();

      $(".event_id_data").click(function() 
       {

      alert($('input[name=event_id]:checked').val()); 

       });
   })
</script>

что я здесь делаю не так, как я могу получить значение значения для конкретного радио в jquery