Как показать данные из JSON-файла на основе нажатого элемента по идентификатору

---

Ладно, с чего начать....
Я строю свою библиотеку фильмов.И у меня есть две страницы, индекс и movie.html.
Index.html появится страница, на которой будут отображаться элементы фильма, каждый элемент будет иметь название, картинку, партитуру, краткое резюме и имена режиссера и сценария.И, кроме того, у меня будет имя от автора, если фильм основан на книге. Все это взято из JSON-файла, который я создал локально.


В другой html-странице, movie.html, я планирую иметь более причудливый дизайн с большей информацией. Например: победы, синопсис, актеры и их персонажи и т. д.

Но вот проблема, с которой я столкнулся.

Что я уже пробовал:

У меня есть это до сих пор index.html

$( 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='%20+%20data[%20i%20].id%20+%20'" 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='%20+%20data[%20i%20].id%20+%20'" 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>" )
            }

        }
    } )

} );

Допустим, у меня есть такой JSON-файл

[
  {
    "id":1,
    "name": "Godzilla",
    "imageStill" :" ",
  },
{
    "id":2,
    "name": "Transformers 1",
    "movieStill" : " ",
  }
]

И когда я нажимаю на элемент из index.html, в movie.html - я хочу иметь один образ.
Проблема у меня заключается в том, что у меня есть два изображения. Потому что он берет изображения с обоих объектов.

$( 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>"
                    )



        }
    } );


} );

---