I am getting an `Array` of items with `jinja2` from a database in an `<a>` tag, item[0] represent an id while item[1] is an attribute (e.g name).  

 I would like to make reference to the id in my `ajax` call so if I click anything in my `anchortag` it makes reference to the id, now once I click anything in my `anchortag`, everything just runs with no reference to id

**HTML**

```
{% for item in people %}
   <a id="foo" class="foo">{{item[1]}}</a>
{% endfor %}

```

**JAVASCRIPT/AJAX**

```
{% 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 = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Old Name</th><td>" + result.peopleinfo.surname  + "</td></tr>"' + "<table>"

$('#infoTab').html(html)

 $("#placenameModal").modal("show");
      }

  });

  });
 {% endfor %} 

```