How to get the value from id from URL and dynamically create content

I really need your help. I have two htmls, index.html and movie html.
In index.html, i have a script, that looks like this.

$( document ).ready( function () {

$.getJSON( "js/appjson.json", function ( data ) {
    for ( var i = 0; i < data.length; i++ ) {

        for ( var key in data[ i ] ) {

            if ( key === "novel" ) {
                $( '#jsonLoad' ).append( '<a href="movies.html?id='+data[i].id'" class="itemsHolder">' +
                "<div class="titleHolder">" +
                "<h2>" + data[ i ].name + "</h2>" +
                "</div>" +
                "<div class="novelAuthor">" +  "<p class="NovelTxt">" + "Novel by" + " " + data[ i ].novel +"</p>" + "</div> " +
                "<div class="posterHolder">" + data[ i ].posterPath + "</div>" +
                "<div class="summaryShort">" + data[ i ].summary + "</div>" +
                "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " +
                "<div class="directorNdScreen">" + 'Directed by ' + " <p class="director">" + data[ i ].director + '</p>' + '  ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>"


                + "</a>" )
            }

        }
        if(!data[i].novel){
            $( '#jsonLoad' ).append( '<a href="movies.html?id='+data[i].id+'" class="itemsHolder">' +
            "<div class="titleHolder">" +
            "<h2>" + data[ i ].name + "</h2>" +
            "</div>" +
            "<div class="posterHolder">" + data[ i ].posterPath + "</div>" +
            "<div class="summaryShort">" + data[ i ].summary + "</div>" +
            "<div class="raiting"><p>" + data[ i ].imdb + "</p></div><div class="genderMovie"> " + data[ i ].gender + "</div> " +
            "<div class="directorNdScreen">" + 'Director by ' + " <p class="director">" + data[ i ].director + '</p>' + '  ' + ' Screenplay by ' + "<p class="screenplay">" + data[ i ].screenplay + "</p>" + "</div>"


            + "</a>" )
        }

     }
   } )

} );

Code (JavaScript):

I have JSON file locally and looks like this.

[

{
"id": 1,
"name": "Harry potter and the Sorcerer's Stone",
"year": 2001,
"movieStill" : " <img    src='imgsMovie/HP1/StillPhoto/StillPhotoBackground.jpg'/>",\
},
{
"id": 2,
"name": "Harry potter and the Chamber of Secrets ",
"year": 2001,
"movieStill" : " <img    src='imgsMovie/HP2/StillPhoto/StillPhotoBackground.jpg'/>",\
}
]

Code (JavaScript):

in my movie.html, i also have a script that looks like this.

$( document ).ready( function () {

$.getJSON( "js/appjson.json", function ( data ) {


        for ( var i = 0; i < data.length; i++ ) {

                $( '.MovieInfo' ).append(
                    "<div class="imgStill">" + data[ i ].movieStill + "</div>"
                )



    }
} );


} );

Code (JavaScript):

My problem is that, it prints me two images, because i am looping in all objects. How can i do, to display the image based on clicked id? Like, if i click on one item, with id 1, to display properties from JSON file from one object, in this case, object 1, with id 1.