JSFiddle - React, Tailwind, and code Playground

HTML

<input id="inp-film" type="text" placeholder="Введите индекс">
<button id="btn-film">показать</button>
    
<div id="film-wrap">
    
    <div class="film" style="display: none;">
        <img class="film-poster" src="" alt="" />
        <h3 class="film-name"></h3>
        <div class="film-description"></div>
    </div>
    
</div>

CSS

#inp-film {
    width: 280px;
    height: 40px;
    
    padding: 0 10px;
    
    border: 1px solid #ccc;
}

.film {
    width: 280px;
    
    margin: 20px 0;    
    padding: 15px 10px;
    
    border: 1px solid #ccc;
    
    text-align: center;
}

.film-poster {
    display: block;    
    max-height: 200px;
    margin: auto;
}

JavaScript

var wrap = document.querySelector('#film-wrap'),
    item = wrap.children[0].cloneNode(true),
    inp = document.querySelector('#inp-film'),
    btn = document.querySelector('#btn-film'),
    data,
    createItem;

item.removeAttribute('style');

createItem = function(index) {
    
    var targetData = data[index],
        newItem = item.cloneNode(true);
    
    newItem.querySelector('.film-poster').src = targetData.poster;
    newItem.querySelector('.film-name').textContent = targetData.name;
    newItem.querySelector('.film-description').textContent = targetData.description;
    
    return newItem;
    
};

btn.addEventListener('click', function() {

    var value = inp.value.toLowerCase();
    
    if (data[value]) {
        wrap.innerHTML = '';
        wrap.appendChild(createItem(value));  
    }
    else {
        wrap.innerHTML = 'ничего не найдено';
    }

});

data = [
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_463897.jpg",
        "name": "Фильм Приключения Паддингтона",
        "description": "Познакомьтесь, это медведь по имени Паддингтон из дремучего Перу."
    },
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_810247.jpg",
        "name": "Фильм Ёлки лохматые",
        "description": "Хозяйка Пирата и Йоко — самарская девочка Настя — улетает с бабушкой в Питер."
    },
    {
        "poster": "http://st.kp.yandex.net/images/film_iphone/iphone360_505966.jpg",
        "name": "Фильм Восхождение Юпитер",
        "description": "Юпитер Джонс родилась под ночным небом, и все знаки предсказывали, что девочке предстоят великие свершения."
    }
];