如何将PHP echo DIV值传递给对话框

Each articles are located in DIV tag. Want to make each DIV clickable and once i click DIV, dialog box should display with appropriate DVI values $add->tbl_article_content, $add->tbl_article_image my JS dialog box appear for only 1st DIV. how should i do it for all DIV and pass relevant data.

PHP

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p id='target'>" . $value->tbl_article_header . "</p>";
       echo "</div>";       
}
?>

Jquery

$( "#target" ).click(function() {
        alert( "relevant DIV database values ??? " );
    });

the id is unique inside a page ... use a class for a group of related div

<?php
foreach ($data as $value) {
   echo "<div class='col-lg-3'>";
   echo "<p class='target'>" . $value->tbl_article_header . "</p>";
   echo "</div>";       
}
?>

and for js

 $( ".target" ).click(function() {
    alert( "relevant DIV database values ??? " );
  }); 

Instead of target as an id you should make it as class

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p class='target'>" . $value->tbl_article_header . "</p>";
       echo "</div>";       
   }
?>

$( ".target" ).click(function() {
     alert( $(this).html() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='col-lg-3'>
<p class='target'>Value 1</p>
</div>

<div class='col-lg-3'>
<p class='target'>Value 2</p>
</div>

<div class='col-lg-3'>
<p class='target'>Value 3</p>
</div>

UPDATE

<div class="row">
<?php
    foreach ($data as $value) {
       echo "<div class='col-lg-3'>";
       echo "<p class='target' data-article=".$add->tbl_article_content.">" . $value->tbl_article_header . "</p>";
       echo "</div>";       
   }
?>

$( ".target" ).click(function() {
     alert( $(this).attr('data-article') );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class='col-lg-3'>
<p class='target' data-article="Articel 1">Head 1</p>
</div>

<div class='col-lg-3'>
<p class='target' data-article="Articel 2">Head 2</p>
</div>

<div class='col-lg-3'>
<p class='target' data-article="Articel 3">Head 3</p>
</div>

</div>