Why isn't table rows clickable, with data retrieved from MySQL & jQuery .click function?

Question

I've retrieved all data from MySQL table and echoed inside a table rows, once it is clicked a text editor appears, although only the first result is clickable while all the rest there are no effects when clicking on them.

foreach to retrieve data

$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'];

    echo '
        <tr id="tr_id">
            <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>
    ';
}

jQuery

$(document).ready(
function()
{
    $("#tr_id").click(function()
    {
        $("#post_info_id").css("display", "block");
        $("#table_id").hide();
    });
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};

EX: I get a list of results

[row 1] title1 | content1
[row 2] title2 | content2
[row 3] title3 | content3
[row 4] title4 | content4
[row 5] title5 | content5
[row 6] title6 | content6

If I click on row 1, the text editor opens up, hides the tr_id and displays the text editor, but if I return to the index page and click on row 2, it's an empty row. I am not sure if this issue is due to using a foreach or because jquery, which I doubt.

Answer 1

id need to be unique. So when doing $("#tr_id") , it return only 1 result (the first one) and do what you ask for. Change your id for a class .

In case you are lazy (but i mean really lazy) and don't care about valid HTML, here 2 working selector :

$("tr#tr_id");
$("[id='tr_id']");

Answer 2

Use class for <tr class="tr_class">

change jquery method to on tr class

$(".tr_class").click(function(){
//your code

})

Because if you want click event on all tr "ID" doesn't suits you well.