How can I loop through ID inside jquery

Question

I looped through the list of doctors in my area from the database and displayed on my page, now I want to load those doctors "About doctor" content inside the bootstrap modal. I created an "about" column inside the same database table where doctors data reside in, now I want to load each doctor "About Us" content when users click on to "see details"(see Image) link.

jquery click event

$('.see-details').on('click',function(){
$('.modal-body').load('getContent.php?id=<?php echo ?>',function(){
    $('#myModal').modal({show:true});
});

});

getabout.php

    if($query->num_rows > 0){
    $row = $query->fetch_assoc();
    echo '<p>'.$row['about'].'</p>';
}else{
    echo 'About Us not found....';
}

how can I echo id dynamically from the database?

Answer 1

This isn't where you want to output the ID:

$('.modal-body').load('getContent.php?id=<?php echo ?>',function(){

Because this code should only exist once on the page, not be copied for every element. Instead, you want to output the ID somewhere that this code can get that value. The ideal place is likely the .see-details element itself. So presumably you have some kind of element for clicking, let's go with this:

echo '<button class="see-details">See Details</button>';

And presumably this is being output to the page in a loop in your PHP code, and that loop has access to the ID values. In that case, you can output those values to the page right there. Something structurally like this:

echo '<button class="see-details" data-id="' . $id . '">See Details</button>';

Which would produce something like:

<button class="see-details" data-id="123">See Details</button>

Now in the click handler for that element you can fetch that ID value and use it in the URL. Something like this:

$('.see-details').on('click', function(){
    var id = $(this).data('id');
    $('.modal-body').load('getContent.php?id=' + id, function(){
        $('#myModal').modal({show:true});
    });
});