I'm having problem with a div which has a button on it.Button has id='delsts' and that whole div is fetched from php like below code:-
//php code
foreach ($data as $row) {
$status = $row['status'];
$fn = $row['firstname'];
$time =$row['posted_dt'];
echo "<div id='stsshown'>
<div class='upropic'></div>
<span class='uname'><a href='#'>".ucfirst($fn)."</a></span>
<span class='postdt'>".$time."</span><form action='#'><input type='button' value='x' id='delsts' title='remove from timeline' name='delsts'></form>
<div id='detailbox'>
asdasd
</div>
<div class='stsbox'>".$status."</div></div>";
}
And this below jquery function is directly added from html(not php)
//Jquery code
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click','#delsts',function(){
$('#detailbox').slideToggle('fast');
});
</script>
Now, according to my php code I have fetched some data first so, everything is fine there I get some five div on my webpage (as I have five data on database related to that div).Now secondly jquery code is handling onclick event function on id 'delsts' of those five div.Now the main problem is that when I click those button of any five div my jquery function works for only first div out of other div why?how can we make every div work same jquery onclick event function individually?