mysql table results with Jquery slidetoggle to show a DIV for each row

[HB316]

I have a query that loops data into a table and I have a slidetoggle jquery that brings up a div (once clicking an edit button) for each table data list

while($rows = mysqli_fetch_assoc($result)){
//table data;
echo '<script>
$(document).ready(function(){
$("#edit'.$rows['iD'].'").click(function(){ //#edit is the id for edit button
$("#edit2'.$rows['iD'].'").slideToggle(); //#edit2 is the div that slidetoggle activates
});
});
</script>';

}

This works however because it loops, a seperate jquery code is created for each table row... lot of repetition.

Is there a way for a single Jquery code to handle this?

Many Thanks

[johanafm]

Yes.

Event bubbling and capturing (whichever is which) lets you handle events on enclosing elements. jQuery has some additional logic to make it easier by letting you specify originating (or is it destination) event target elements for which the enclosing event should be used.

Assuming a table element, you'd

        $(document).on('ready', function() {
            $('#enclosing').on('click', 'tr', function(e) {
                var $t = $(this);
                console.log('e.target: ' + e.target);
                console.log('$(this): ' + $t);
                console.log('First cell in row: ' + $t.children('td:first').html());
            });
        });

[HB316]

this is difficult for me to implement 🙁 and cant see how it would work