Мой скрипт Ajax не скрывает Bootstrap Modal после отправки

У меня есть страница, на которой отображаются 6 карт начальной загрузки в 3 столбцах. Каждая карточка Bootstrap отображает изображение, имя, описание и кнопку нижнего колонтитула. Когда пользователь нажимает кнопку нижнего колонтитула Bootstrap Card, Bootstrap Modal открывается с данными строки Sql по идентификатору и в этот Bootstrap Modal имеет 2 входа и одну форму textarea, которые описаны ниже:

1. <input type = "text" name = "name" id = "name" class = "form-control" required />

2. <input type = "email" name = "email" id = "email" class = "form-control" required />

3. <textarea class = "form-control" type = "text" name = "message" id = "message" rows = "3"  
required></textarea>

Чтобы открыть Modal с учетом ID, я вставил код PHP в код карточки кнопки, как показано ниже:

<button type = "button"  class = "btn btn-block btn-primary" data-toggle = "modal" 
data-target = "#dataModal<?php echo $record['ID']; ?>">View Details</button>

Где <?php echo $record['ID']; ?> относится к идентификатору строки SQL.

Когда пользователь заполняет форму и нажимает кнопку отправки Modal, все данные отправляются в базу данных, и это нормально, но Bootstrap Modal не скрывается после успеха Ajax.

Сценарий Ajax, который я использую для вставки данных через php-код (insert.php) в базу данных:

<script type = "text/javascript" language = "javascript" >

$(document).on('submit', '#contactForm', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert("Message sent!");                 
                    $("#contactForm")[0].reset();
                    $('#dataModal').hide();
                    $(".modal-backdrop").remove();

                }
});
});

</script>

Я думаю, что проблема связана с этой строкой об успехе Ajax: $('#dataModal').hide();, потому что атрибут Bootstrap Modal html id равен "dataModal<?php echo $record['ID']; ?>", а не только «dataModal».

В этом случае, если я поставлю так $('#dataModal<?php echo $record['ID']; ?>').hide();, ничего не произойдет.

Ниже приведен полный код:

<div class = "container">

<?php
include_once("includes/mysqli_connection.php");
$sql = "SELECT * FROM products ORDER BY RAND() LIMIT 6";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $record = mysqli_fetch_assoc($resultset) ) {
?>  

<div class = "card-deck" style = "width: 18rem; display:inline-block; margin:15px;">
  <div class = "card">
  <?php echo '<img src = "upload/'.$record["image"].'" class = "img-thumbnail" width = "286" height = "180" />'; ?>
    <div class = "card-body" align = "center"><h5 class = "card-title"><?php echo $record['ProductName']; ?></h5></div>
    <div class = "card-footer">
      <button type = "button"  class = "btn btn-block btn-primary" data-toggle = "modal" data-target = "#dataModal<?php echo $record['ID']; ?>">View Details</button>
    </div>
  </div>
</div>

<!-- Modal -->
<div class = "modal fade" id = "dataModal<?php echo $record['ID']; ?>" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
  <div class = "modal-dialog modal-lg" role = "document">
    <div class = "modal-content">
      <div class = "modal-header">      
        <h5 class = "modal-title" >Product: <?php echo $record['productName']; ?></h5> 
        <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
          <span aria-hidden = "true">&times;</span>
        </button>
      </div>

      <div class = "modal-body">

<div class = "lead">Ask us about this product</div>

<form id = "contactForm" method = "post">
<div class = "form-row">
<div class = "col-md-4 mb-3">
<label>Name</label>
     <input type = "text" name = "name" id = "name" class = "form-control" placeholder = "Your name" required />
</div>
     <div class = "col-md-5 mb-3">
     <label>E-mail</label>
       <input type = "email" name = "email" id = "email" class = "form-control" placeholder = "Your e-mail" required />
</div>

</div>

<div class = "form-row">
<div class = "col-md-12 mb-3">
<label>Message</label>
<textarea class = "form-control" type = "text" name = "message" id = "message" rows = "3"  placeholder = "Your message" required></textarea>
</div>
</div>

      </div>
      <div class = "modal-footer">
        <button type = "button" class = "btn btn-secondary" data-dismiss = "modal">CLOSE</button>

         <button type = "submit" class = "btn btn-success" id = "submit" >SEND</button>
</form>
      </div>
    </div>
  </div>
</div>
<?php } ?>
</div>

<script type = "text/javascript" language = "javascript" >

$(document).on('submit', '#contactForm', function(event){
        event.preventDefault();
    $.ajax({
                url:"insert.php",
                method:'POST',
                data:new FormData(this),
                contentType:false,
                processData:false,
                success:function(data){
                    alert("Message sent!");                 
                    $("#contactForm")[0].reset();
                    $('#dataModal').hide();
                    $(".modal-backdrop").remove();

                }
});
});

</script>

Что в таком случае может быть и что делать? Спасибо всем.