Positioning info boxes with dynamic content

Where I'm At

Trying to have these tooltips or info boxes to appear relative to a headshot of an MLA (see var MLA =, I've been able to get the first info box over top the image of the first person in the array.

Where I'm Stuck

When I put in the chunk of code pertaining to the positioning of the tooltips in scripts.js, I haven't been able to get tooltips to appear over top of the images of the remaining people, there are about 50 in total in the array, I've included a snippet of two of the people in the example.

Likewise, I get no error in the console and my tooltip with information containing (name, age, ethnicity etc.) does not show up at all.

scripts.js

$(function() {
    // MLAs
    var MLAs = [
    {
        "Name": "Nancy Allan",
        "Age": 62,
        "Constuency": "St. Vital",
        "Party": "NDP",
        "Gender": "Female",
        "Ethnicity": "White"
    },
    { // Missing Data
        "Name": "James Allum",
        "Age": null,
        "Constuency": "Fort Garry-Riverview",
        "Party": "NDP",
        "Gender": "Male",
        "Ethnicity": "White"
    }];

    // Shows a popup with MLA information
    $(".headshot").click(function(){
        var idx = $(this).index();

        $(".tooltip").fadeIn("slow");
        $(".tooltipName").html(MLAs[idx].Name);
        $(".tooltipParty").html(MLAs[idx].Party);
        $(".tooltipConstuency").html(MLAs[idx].Constuency);
        $(".tooltipEthnicity").html(MLAs[idx].Ethnicity);
        $(".tooltipAge").html(MLAs[idx].Age);
    });

    // Positioning of the tooltips
    $('.headshot').each(function(){
        var img = $(this);

        img.click(function(){
            $('.tooltip')
            .show(100)
            .text(img.attr('alt'))
            .offset({
                top : img.offset().top + img.height(),
                left : img.offset().left
            });
        });
    });
});

index.html