How to get attribute value from table row on click
<p>I have a <em>TABLE</em> which is empty. I have an array called <em>menu</em> which contains a list of some products.
The code below iterates <em>menu</em> and creates rows in the table as many as there is products in the <em>menu</em> array. </p>

<p>To identify products in rows, -the best approache I could think of, was to use attribute; data-ID="" to store id of the product which is inserted in the row.</p>

<pre><code>    var id=[];
$(document).ready(function addMenuToTable() {
    for ( var i in menu) {
        $('#menutable').append('&lt;tr class ="product" role="button" data-id=""&gt;&lt;td class"num"&gt;'+menu[i].num+'&lt;/td&gt;&lt;td class="td-width"&gt;&lt;span&gt;&lt;b&gt;'+menu[i].name+' &lt;/b&gt;&lt;/span&gt;&lt;br&gt;'+menu[i].ingred+'&lt;/td&gt;&lt;td&gt;'+menu[i].price+'&lt;/td&gt;&lt;/tr&gt;');
        $('#menutable tr').attr('data-id', menu[i].id);
        id.push( $('#menutable tr').attr('data-id'));
    }
    console.log(id);
});
</code></pre>

<p>Now on click on any row, I want to retrieve the id of that certain product.</p>

<pre><code>    $(document).on('click','tr', function() {
    var id = $(this).attr('data-id');
    console.log(id);
});
</code></pre>

<p>But when I test it with console.log, I only get the last product id, no matter what row I click on. Any suggestions what I am doing wrong? </p>