Есть 4 div
с кнопками. По клику на кнопку открывается модальное окно, которое должно брать заголовок и картинку из div
'a. Как осуществить такую магию?
$('.izdat_button').on('click', function() {
var value = $('.izdat p').html();
var imgMe = $('.izdat img').attr('src');
$('.time_to_change').html(value);
$('.img_izdat img').attr('src', imgMe);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="izdat">
<img src="img/1.png" alt="">
<p>Инструкция<br><strong>"1"</strong></p>
<button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
<img src="img/2.png" alt="">
<p>Инструкция<br><strong>"2"</strong></p>
<button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
<img src="img/3.png" alt="">
<p>Инструкция<br><strong>"3"</strong></p>
<button class="izdat_button" type="submit">Подробнее</button>
</div>
<div class="izdat">
<img src="img/4.png" alt="">
<p>Инструкция<br><strong>"4"</strong></p>
<button class="izdat_button" type="submit">Подробнее</button>
</div>
<div style="display: none;">
<div class="box-modal" id="instructions_form">
<div class="wrap_form">
<p class="time_to_change">Инструкция<br><strong>1</strong></p>
<div class="img_izdat">
<img src="img/1.png" alt="">
</div>
</div>
<div class="clearfix"></div>
</div>
</div>