Pop-up window is not displayed magnific-popup

There are several products with a button to order, nothing happens when you press it, and another question is how can you transfer the name of the particular product you clicked to the hidden input value?

<div class="catalog__item"> <div class="img-catalog-block-item" style="background: url(img/red.jpg) center no-repeat; background-size: cover;"> <div class="sale"><span>-50%</span></div> </div> <p style="text-align: center; margin-top: 20px">Товаров осталось: 9</p> <div class="product-info clearfix"> <h5 id="prod">Товар 1 </h5> <h4>399<span>800</span></h4> <div class="catalog__item"> <div class="img-catalog-block-item" style="background: url(img/red.jpg) center no-repeat; background-size: cover;"> <div class="sale"><span>-50%</span></div> </div> <p style="text-align: center; margin-top: 20px">Товаров осталось: 9</p> <div class="product-info clearfix"> <h5 id="prod">Товар 2 </h5> <h4>399<span>800</span></h4> 

And the order form itself

 <div class="hidden"> <form id="modal_form"> <input type="hidden" name="product" value=""> <input type="text" name="name" placeholder="Введите Ваше имя" required><br> <input type="phone" name="phone" placeholder="Введите Ваш номер" required><br> <button>отправить</button> </form> </div> 

Form styles:

 .hidden { display: none; background: black; color: white; } 

Js code

 $(".popup").magnificPopup(); 

connected magnificPopup and jq

  <script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>