Bootstrap modals not correctly hiding - php

Question

First and foremost, the code is a mess because I had gotten some outside help from a person who did not take his coding seriously, right now I need to meet a deadline and am focusing on functionality, so I apologize beforehand, I'll get to cleaning it up in time.
We are creating a simple shopping page that includes PHP, bootstrap. We store the product information the in a mysqli database. We have multiple modals for each item where you can choose the size, and then add them to the cart.
The problem is that while the bootstrap modals cannot be seen, they are still "clickable" as if they were active when they are not. This does not apply to the cart modal, at least as far as I can tell.
I tried to fix this by changing the z index of the class of modals, however, that did not work.
the html (and PHP):
<section class="products">
<?php
$db = new Database();
$db->connect();
$db->select('tbl_items','productid,Product_Name,Product_Price,Product_Quantity,Category,Product_Picture',NULL,'Category!="Beverage" and Product_Quantity > 0','productid ASC'); // Table name, Column Names, JOIN, WHERE conditions, ORDER BY conditions
$res = $db->getResult();
$rows = array();
foreach ($res as $row)
{?>
<div class="product-card">
<form method="post" class="product-form card-form">
<div class="product-image">
<?php echo '<img class="gallery-pic responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="product-info-container">
<div class="product-info">
<h3 id="prod-name" class="prod-info"><?php echo $row['Product_Name']; ?><h3>
</div>
<div class="product-info">
<span class="prod-info">
<h4>R<?php echo $row['Product_Price']; ?></h4>
</span>
</div>
</div>
<div class="product-info add-btn-container">
<div class="customn-btn btn-lg btn-block add-cart-btn" title="Add to FOGo"
data-toggle="modal" data-target="#product<?php echo $row['productid'];?>modal"
onclick="resetSize()">
Add to cart<i class="fa fa-cart-plus" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
I assign the product ID to the id of the modal to so that it can be referenced in the add to cart button above
Continue in the loop:
<div class="modal fade product-modal" id="product<?php echo $row['productid'];?>modal"
role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header color-gradient">
<button type="button" title="Close Plate" class="close"
data-dismiss="modal">×</button>
<h4 id="item-title" class="modal-title"><?php echo $row['Product_Name'];?></h4>
</div>
<div class="display-pic-container">
<?php echo '<img class=" responsive" src="data:image/jpeg;base64,'.base64_encode( $row['Product_Picture'] ).'"/>';?>
</div>
<div class="modal-footer">
<div class="form-group">
<label class="size-lbl" for="size">Size</label>
<select class="form-control" name="size" onchange="changeSize(event)">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
</select>
</div>
<button type="button" title="Close Plate"
class="close-btn btn-lg btn-block cart-btn" id="close_cart"
data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i>
Close</button>
<span onclick="addToCart(<?php echo $row['productid'];?>, event )"
title="Add to cart" class="btn-lg btn-block cart-btn check-out-btn"><i
class="fa fa-credit-card" aria-hidden="true"></i>
Add to cart</span>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>