How to get the right value for the jquery "id" variable in this custom code?
<p>I have 20 divs with the same class (bio):</p>

<pre><code>&lt;div class="bio" data-id="&lt;? echo $id; ?&gt;"&gt;
  &lt;p&gt;the bio1 text&lt;/p&gt;
  &lt;a id="car" href="http://www.mycustomurl.com"&gt;my car 1&lt;/a&gt;
&lt;/div&gt;

&lt;div class="bio" data-id="&lt;? echo $id; ?&gt;"&gt;
  &lt;p&gt;the bio2 text&lt;/p&gt;
  &lt;a id="car" href="http://www.mycustomurl.com"&gt;my car 2&lt;/a&gt;
&lt;/div&gt;

--------

&lt;div class="bio" data-id="&lt;? echo $id; ?&gt;"&gt;
  &lt;p&gt;the bio20 text&lt;/p&gt;
  &lt;a id="car" href="http://www.mycustomurl.com"&gt;my car 20&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>I make this ajax call when someone clicks the link with the id <strong>car</strong>:</p>

<pre><code>jQuery("#car").click(function(){
    var id = $(".bio").data('id'); /* HERE IS THE PROBLEM, id is always empty */
    jQuery.ajax({  
        type: 'POST', 
        url: 'myajaxurl',  
    data: {  
       action: 'cars',
       id: id
    }
        });  
});
</code></pre>

<p><strong>The problem is:</strong></p>

<p>How do I get the right <strong>id value</strong> (var id) corresponding to the right link that was clicked?</p>

<p>Do I need a jquery each loop?</p>

<p>It does not seem to work, <strong>var id</strong> is always empty.</p>
