Expand table row and show more data. I have some s

问题:

Table with a lot of table rows, but when I click at any of the rows it expand me only one row with ID 1. I need every row to be expandable for itself. How?

<table class='table' id='myTable'>
<tr>
    <th>ID</th>
</tr>
<tr id='row1'>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
<tr id="row1">
    <td>2</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>

<td colspan='5' id='row1-info' class='emarNote'>
    <div id='odgovor'>

        <div id='listaOdgovora'>
            <table class='table'>
                <tr>
                    <th>Id</th>
                    <th>Sample</th>
                    <th>Sample</th>
                    <th>Sample</th>
                    <th>Sample</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>

            </table>
        </div>
    </div>
</td>
</tr>

AND javascript code

$(document).ready(function () {
$('.emarNote').hide();
$('#myTable').click(function (event) {
    tr_ID = $(event.target).parent().attr('id');
    $('#' + tr_ID + '-info').fadeToggle('slow');
});
});

Here an example on jsfiddle

回答1:

The id of your second row is the same as the id of your first row.