How to connect clickable row to specific data sections retrieved from database?

Question

The title might be a little misleading but it's quite a difficult one to put into words.

I've been trying all day and failed even with attempts from stackoverflow, so I must ask once again for help.

I am retrieving a list of article information from MySQL and displaying them in a table. Once displayed these table rows are clickable by using jQuery .click function , when clicked ckeditor (which is with a display:none; ) opens from a <section></section> and hides the whole table.

The issue that I am having is when I click on a row, it should display the data from those specific articles inside the ckeditor, but no matter what the first row data always shows up even if I click on a different row, I can point out that it is due to not having an id so the .click function cannot distinguish which section it is trying to show, but I cannot figure out how to connect the table with the section information.

This is how I am retrieving the data and displaying it in a table, using foreach.

<?php
$getInfo = $articleClass->get_all_article_info();

foreach($getInfo as $data)
{
    $article_title        = $data['article_title'];
    $article_content      = substr(htmlentities($data['article_content']),0,50).'...';
    $article_content_full = $data['article_content'];
    $article_uid          = $data['article_uid'];

    echo '
        <tr id="tr_id" class="'.$article_uid.'">
            <td class="marker">
                <i class="fa fa-align-left"></i>
            </td>

            <td class="title">
                '.$article_title.'
            </td>

            <td class="content">
                '.$article_content.'
                </td>
        </tr>

        <section id="post_info_id" style="display:none;">
            <textarea id="editor1">
                <div style="width:468px;">
                    '.$article_content_full.'
                </div>
            </textarea>
        </section>
    ';
}
?>

And this is the click function; jQuery.

<script type="text/javascript">
$(document).on('click', '#tr_id', function ()
{
    $("#post_info_id").css("display", "block");
    $("#table_id").hide();
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};
</script>

I know that the problem is that when I click on the tr , it cannot distinguish the #post_info_id , because it just retrieves about 20 rows of information but the $post_info_id has no specific id to match with the #tr_id , but I have no idea how I could even accomplish this.. I have retrieved the article_uid which is an incremented number when the articles are inserted into the database, and could use that to mark both the #tr_id and #post_info_id but with jQuery I have no idea how to accomplish after what I tried.

I don't want to make this a long question, considering the more I write the less likely I will get an answer but here is what I have tried.

I tried setting the article_uid as the id, but I cannot retrieve the id's of the articles as they're in random, and there's nothing specific that I was able to connect both the post_info_id and tr_id by using .attr('id') .

Answer 1

This can be achieved by using the Jquery next() function.

You could change your onclick method to this:

$(document).on('click', '#tr_id', function ()
{
     $(this).next('section').css("display", "block");
     $("#table_id").hide();
});

And all elements should always have unique ids so here's a way to achieve that:

'<section id="post_info_id"'.$counter.' style="display:none;">
     <textarea id="editor'.$counter.'">
         <div style="width:468px;">
             '.$article_content_full.'
         </div>
     </textarea>
 </section>'

Then declare a variable to keep count outside your loop:

$counter = 0;

Finally, increment the counter at the end of the loop:

$counter++;