executing function on only clicked element in $.each

[J._1]

Im using the youtube api to search for videos. The information gets displayed perfectly on the page similiar to the youtube page layout. I have a function that when each div is clicked it will create an iframe fixed to the top of the page playing the video that was clicked, but my problem is making the function work for only the div that is clicked. obviously if i put the function under the iframe function comment it will create an iframe for each object so if maxResults is 10 it will create 10 iframes. How do i go about so the function only gets the videoId from the video clicked and uses it to make an iframe? I've tried using this and playing with variable scope but no luck

$.get(
        "https://www.googleapis.com/youtube/v3/search", {
        q: q,
        part: 'snippet',
        maxResults: 10,
        forUserName: '',
        key: key},
        function (data){
            $.each(data.items, function(i, item){
                var qImg = item.snippet.thumbnails.medium.url;
                var qtitle = item.snippet.title;
                var qId = item.id.videoId;
                //Append Results to page
                var output = "<li  class='flex-1'><div class='gridfront' style='background-image: url("+qImg+")'><p class='qtitle'>"+qtitle+"</p></div><div class='gridback'><p>"+item.snippet.description+"</p><span>"+item.snippet.channelTitle+"</span></div></li>";
                $('#youtube-container').append(output);

                //iFrame function
            })

        }
    );

};



function makeIframe(qId){
    var ifrm = document.createElement("iframe");
    document.body.appendChild(ifrm);
    ifrm.id = "video"; 
    $('#video').attr("src", "https://www.youtube.com/embed/"+qId);
    $('#video').attr("allowfullscreen", true);
    $('#video').attr("frameborder", 0);
}

[hericles]

If you're getting the results back via JSON and then adding each to the page why can't you add a jQuery .click function to each one at the same time?
$('.flex-1').click(function() {});
Then, when a .flex-1 is clicked, the this keyword will target the clicked element only.

[J._1]

ok i had a feeling i could do it this way, i just dont have experience using the* this* keyword