Jquery function which is added from html and div that has been called from php on webpage is not working properly

Question

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?

Answer 1

Do not use id with the same value for multiple elements. Use a class selector instead for all elements.

Example HTML:

<div class='stsshown'>
    <div class='upropic'></div>
    <span class='uname'><a href='#'>username</a></span>
    <span class='postdt'></span><form action='#'><input type='button' value='x' class='delsts' title='remove from timeline' name='delsts'></form>
    <div class='detailbox' style="display:block;">
        test
    </div>
    <div class='stsbox'></div>
</div>

JS:

$(document).ready(function(){
    $('.delsts').on('click', function(){
        $(this).closest('.stsshown').find('.detailbox').slideToggle('fast');
    });
});

This example is usable for generation of multiple sets of elements you want to achieve.

Answer 2

There can be only 1 id element with the same name in the document, but you generate more of them in loop.

Use classes instead of IDs, or assign unique IDs for each item.

change your jquery code to:

<script type="text/javascript">
   $(document).ready(function(){
    $(".delsts").click(function(){
            $(this).next(".detailbox").slideToggle('fast');
    });

 });
</script>

and php:

 foreach ($data as $row) {
          $status = $row['status'];
        $fn = $row['firstname'];
        $time =$row['posted_dt'];
        echo "<div class='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' class='delsts' title='remove from timeline' name='delsts'></form>
                <div class='detailbox'>
                asdasd
                </div>
        <div class='stsbox'>".$status."</div></div>";
    }