jQuery iterate over JSON Object based on click event that adds search specific class

Question

I've got a JSON object:

var json = {

 "projectData": [
    {
        "projectLogo": "images/projects/NUKETOWN/logo.gif",
        "projectName": "NUKETOWN",
        "projectDescription": "Labore amet deserunt mollit ad aute incididunt elit mollit. Reprehenderit minim dolore adipisicing dolore consequat ut deserunt proident. Id amet incididunt sit anim aliquip nisi nostrud quis laboris id ex ea et minim. Amet et ullamco cupidatat pariatur exercitation ex reprehenderit occaecat. Cupidatat fugiat officia exercitation dolor. Consectetur anim Lorem ut nulla ullamco occaecat.\r\n",
        "projectTags": "cms",
        "_id": "54a1583172bcc9e24149f938",
        "index": 0,
        "isActive": false
    },
    {
        "projectLogo": "images/projects/3DAUDIOPARTICLEVIZ/logo.png",
        "projectName": "PARTICLE AUDIO VISUALIZER",
        "projectDescription": "Magna ullamco aliqua aute qui enim est. Qui labore adipisicing id elit do. Lorem nostrud fugiat enim deserunt sit ut Lorem esse reprehenderit minim. Deserunt irure anim tempor fugiat nostrud. Ex sit proident irure duis incididunt. Adipisicing deserunt cupidatat cillum do sit ut elit nulla Lorem.\r\n",
        "projectTags": "design",
        "_id": "54a15831d37fba1c8326508f",
        "index": 1,
        "isActive": false
    },
    {
        "projectLogo": "images/projects/DANETHEORY/logo.png",
        "projectName": "DANETHEORY",
        "projectDescription": "Commodo anim ea nostrud do voluptate mollit nostrud aliquip consequat. Et et ea nulla consectetur Lorem culpa nostrud sint adipisicing eiusmod. Deserunt laborum do culpa deserunt esse dolor id. Fugiat veniam est elit nulla. Nostrud elit sint deserunt nulla. Cillum aute magna commodo consequat velit ad labore culpa adipisicing sunt. Aliquip aliqua sint aliqua proident magna sit duis laboris exercitation occaecat velit do.\r\n",
        "projectTags": "drupal",
        "_id": "54a15831e69781e59f56d271",
        "index": 2,
        "isActive": false
    },

etc.

40 items in total. The main variable for the object is "json", and I used a main identifier internally within the object, i.e. "projectData" (not sure if that's the right way about doing it).

What I am trying to do is pull in specific fields from the JSON Object. I'd like to do this via a jQuery click event which adds a class to the clicked element, then for that element (with the clicked class name), iterate over the JSON object and pull the data I need individually.

So far I've only been able to pull in all the fields for each object on click. How can I write my if statement to correct this?

Here's my code:

// CLICK EVENT FOR ELEMENT  
$('.element').on({

click: function() {         

    $(this).addClass('clicked');

        $.each(json, function (key, data) {

            //console.log(key);

                //if ($(this).hasClass( "clicked" )) {

                    $.each(data, function (index, data) {

                        console.log('index', data.projectName);

                        });
                    //});
                });
            }
        });

The above snippet will console all 40 element projectName's. Uncommenting the if statement breaks the scene (this is built using threejs and the CSS3Renderer).

Essentially on an element click, I'd like a modal to drop down with the clicked elements relevant JSON data. I've been able to create all the objects within my scene using JavaScript's for loop. I'm using jQuery to handle the hover event and click though. Chaining is simple enough to pull off.

Any help or guidance on this would be solid.

EDIT: Ozan's answer worked beautifully. As per his request, I am updating this question with the original JS for loop I used in creating the elements. The jQuery from Ozan's answer works because I already indexed the JSON Object with the original loop.

    // FUNCTION LOOP TO CREATE "ELEMENTS" VIA JSON OBJECT
for ( var i = 0; i < json.projectData.length; i ++ ) {

    // Individual Element Creation
    var element = document.createElement( 'div' );
        element.className = 'element';

    // Individual Element Picture Creation
    var logo = document.createElement( 'div' );
        logo.className = 'logo';
        logo.innerHTML = "<img src='" +json.projectData[i].projectLogo + "'>";                  

            element.appendChild( logo );

    // Individual Element Title Creation        
    var elemTitle = document.createElement( 'H1' );
        elemTitle.className = 'elemTitle';
        elemTitle.innerHTML = json.projectData[i].projectName;                  

            element.appendChild( elemTitle );

Answer 1

For loop you gave shows that these elements are placed into the dom in the order they show in the array, so you could use their index number to find relevant data.

$(".element").on("click", function(e){
  var index = $(".element").index(this);
  console.log(json.projectData[index]);  
});