title: Referencing a anchor tag in ajax
body: <p>I am getting an <code>Array</code> of items with <code>jinja2</code> from a database in an <code>&lt;a&gt;</code> tag, item[0] represent an id while item[1] is an attribute (e.g name).<br>
   I would like to make reference to the id in my <code>ajax</code> call so if I click anything in my <code>anchortag</code> it makes reference to the id, now once I click anything in my <code>anchortag</code>, everything just runs with no reference to id</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>{% for item in people %}
     &lt;a id="foo" class="foo"&gt;{{item[1]}}&lt;/a&gt;
  {% endfor %}
  </code></pre>
  
  <p><strong>JAVASCRIPT/AJAX</strong></p>
  
  <pre><code>{% for item in people %}
  
  $(".foo").click(function(evt) {
  $.ajax({
   url: "/~s6/cgi-bin/people.py",
   async: true,
   type: "post",
   datatype:"json",
   data: {'peopleid': {{item[0]}}},
        success: function(result) {
          console.log(result)
          //console.log(result.peopleinfo.surname)
         // console.log(result.peopleinfo.othernames)
          console.log(result.familyinfos)
  
           html = "&lt;table class='table table-striped table-bordered table-condensed'&gt;" + "&lt;tr&gt;&lt;th&gt;Old Name&lt;/th&gt;&lt;td&gt;" + result.peopleinfo.surname  + "&lt;/td&gt;&lt;/tr&gt;"' + "&lt;table&gt;"
  
  $('#infoTab').html(html)
  
   $("#placenameModal").modal("show");
        }
  
    });
  
  
    });
   {% endfor %} 
  </code></pre>