Я не вижу данные моей базы данных в модальном режиме.Что пошло не так?

Question

Я новичок в HTML, PHP и особенно в AJAX и JQuery.

Я создал страницу еды для электронной коммерции в формате HTML, в которой изображения отображаются в виде сетки, и каждое изображение имеет эффект наведения. При наведении курсора вы видите титул, соответствующий изображению, и кнопку с надписью «Просмотр» (на голландском). Изображения и заголовки изображений извлекаются из базы данных, в которую я могу вставить данные через страницу администратора.

Теперь я хотел бы показать некоторые данные из той же базы данных в модале Bootstrap с некоторой дополнительной информацией. Когда кнопка просмотра нажата, это открывает модальное. Страница не может быть перезагружена (из-за модальности), поэтому я использую Jquery AJAX для этого.

Теперь проблема в том, что когда я нажимаю кнопку, открывается модальное окно, но я ничего не вижу в модальном. Это просто пусто, и я понятия не имею, где находится проблема.

p.s. Оператор <?php getPro(); ?> относится к функции, которая очищает данные из базы данных.

Сетка изображений HTML:

div class="container vertical-center-menu">
    <div class="row about-container">
      <div class="container mt-40">
        <div class="row mt-30">
                <?php getPro(); ?>
                <input type="button" name="view" value="Bekijken" id="<?php echo $row["product_id"];?>" class="btn btn-info btn-md view_data"/>
                </div>
              </div>
            </div>

HTML-модал:

<div class="modal fade" id="dataModal">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">

      <!-- Modal body -->
      <div class="modal-body" id="product_detail">


      </div>
    </div>
  </div>
</div>

Jquery & AJAX-скрипт:

<script>
$(document).ready(function(){
  $('.view_data').click(function(){
    var product_id = $(this).attr("id");

    $.ajax({
        url:"select.php",
        method:"post",
        data:{product_id:product_id},
        success:function(data){
          $('#product_detail').html(data);
          $('#dataModal').modal("show");
        }
    });


  });
});
</script>

PHP (страница Select.php)

<?php
if(isset($_POST["product_id"]))
{
  $output = '';
  $connect = mysqli_connect("localhost","root","","ecommerce");
  $query = "SELECT * FROM products WHERE product_id = '".$_POST["product_id"]."'";
  $result = mysqli_query($connect, $query);


  while($row_pro = mysqli_fetch_array($result)){
    $pro_id = $row_pro['product_id'];
    $pro_title = $row_pro['product_title'];
    $pro_price = $row_pro['product_price'];
    $pro_desc = $row_pro['product_desc'];
    $pro_image = $row_pro['product_image'];


  echo '
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <div class="row h-100">
          <div class="col-md-5 col-sm-6 my-auto" style="overflow:hidden;">
            <img src="admin_area/product_images/$pro_image" alt="" style="height: 200px; ">
          </div>
          <div class="col-md-7 col-sm-6">
            <h3><strong>$pro_title</strong></h3>
            <h4>&euro; $pro_price</h4>
            <hr>
            <p> $pro_desc </p>
            <form>
              <div class="form-group">
                <label for="sel1">Aantal:</label>
                <select class="form-control" id="sel1">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                </select>
                <br>
                <button type="button" class="btn btn-primary">Voeg toe</button>


  ';
}
}

 ?>

Я ожидаю, что выводом будут данные из переменных, но он показывает пустой модал.