Почему .text() по клику в input, передается только от первого элемента?

Добрый вечер.
столкнулся с небольшой проблемой,
в DOM дерево передаю информацию с JSON вот такого вида.
<div class="block-info">
            <span class="block-food">кекс очень вкусный</span>
            <button class="block-btn">Заказать</button> 
       </div>

<div class="block-info">
            <span class="block-food">кекс совсем не вкусный</span>
            <button class="block-btn">Заказать</button> 
       </div>
// и один инпут в который нужно передать значение.

       <input class="out" type="text">

все блоки и контент внутри них имеют одинаковые классы.
задача состояла в том чтобы при нажатии на
<button class="block-btn">Заказать</button>
в
<input class="out" type="text">
передавалось значение класса class="block-food" данного блока.
для этого решения использовал данный код.
$('.block-btn').on('click', function() {
            var food = $(this).parent().find('.block-food').text();
            $('.out').val(food);
        });

но я не могу понять почему код срабатывает только для первого блока, а для остальных нет(.
то есть при нажатии на (ЗАКАЗАТЬ) от первого блока, в инпут выводится значение (кекс очень вкусный).
а при нажатии на (ЗАКАЗАТЬ) второго блока - уже ничего не происходит((
может кто то имел дело с данной проблемой?
может нужно переписать код?
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Всё работает
https://jsfiddle.net/eo4ge6tL/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы